blockquote,
body,
button,
caption,
dd,
div,
dl,
dt,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
input,
legend,
li,
menu,
ol,
p,
pre,
table,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0
}

address,
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

caption,
th {
    text-align: left;
    font-weight: 400
}

abbr,
body,
fieldset,
html,
iframe,
img {
    border: 0
}

address,
cite,
dfn,
em,
i,
var {
    font-style: normal
}

[hidefocus],
summary {
    outline: 0
}

li {
    list-style: none
}

h1,
h2,
h3,
h4,
h5,
h6,
small {
    font-size: 100%
}

sub,
sup {
    font-size: 83%
}

code,
kbd,
pre,
samp {
    font-family: inherit
}

q:after,
q:before {
    content: none
}

textarea {
    overflow: auto;
    resize: none
}

label,
summary {
    cursor: default
}

a,
button {
    cursor: pointer
}

b,
em,
h1,
h2,
h3,
h4,
h5,
h6,
strong {
    font-weight: 400
}

a,
del,
ins,
s,
u {
    text-decoration: none
}

body,
button,
input,
keygen,
legend,
select,
textarea {
    font: 14px/1.5 Helvetica, sans-serif;
    color: #333;
    outline: 0
}

body,
html {
    background-color: transparent
}

a,
a:visited {
    color: #333
}

body,
html {
    height: 100%;
    width: 100%;
    -webkit-text-size-adjust: 100%
}

a,
b,
blockquote,
body,
button,
caption,
dd,
del,
div,
dl,
dt,
em,
fieldset,
figure,
form,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
html,
i,
ins,
legend,
li,
menu,
ol,
p,
pre,
s,
span,
strong,
table,
td,
textarea,
th,
u,
ul {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none
}

input,
select,
textarea {
    -webkit-appearance: none;
    border-radius: 0;
    border: 0;
    background-color: transparent
}

input:focus,
select:focus,
textarea:focus {
    outline: 0
}

input::-webkit-input-placeholder {
    color: #969696
}

video::-webkit-media-controls-start-playback-glyph {
    will-change: opacity
}

.f-cb:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    overflow: hidden;
    content: "."
}

.f-brk {
    word-wrap: break-word;
    word-break: break-all;
    white-space: normal
}

.f-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal
}

.f-thide2,
.f-thide3,
.f-thide4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical
}

.f-thide3 {
    -webkit-line-clamp: 3
}

.f-thide4 {
    -webkit-line-clamp: 4
}

.f-bd {
    position: relative
}

.f-bd:after {
    position: absolute;
    z-index: 2;
    content: "";
    top: 0;
    left: 0;
    pointer-events: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    transform-origin: top left;
    border: 0 solid rgba(0, 0, 0, .1)
}

.f-bd-top:after {
    border-top-width: 1px
}

.f-bd-btm:after {
    border-bottom-width: 1px
}

.f-bd-tb:after {
    border-width: 1px 0
}

.f-bd-left:after {
    border-left-width: 1px
}

.f-bd-right:after {
    border-right-width: 1px
}

.f-bd-lr:after {
    border-width: 0 1px
}

.f-bd-full:after {
    border-width: 1px
}

.u-height {
    height: 100%
}

.u-img {
    width: 100%;
    vertical-align: middle
}

.u-underline {
    text-decoration: underline
}

.u-verhozmiddle {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.u-notexit {
    height: 100%;
    background-color: #f1f2f3
}

.u-smtitle {
    height: 23px;
    line-height: 23px;
    padding: 0 10px;
    font-size: 12px;
    color: #666;
    background-color: #eeeff0
}

.u-hmsprt {
    background: url(index_icon_2x.png) no-repeat;
    background-size: 166px 97px
}

.u-earp {
    background-image: url()
}

.u-arowdown {
    background-image: url()
}

.u-arowup {
    background-image: url()
}

.cm-mask {
    background-color: rgba(0, 0, 0, .7) !important;
    z-index: 401 !important
}

.c-modal-wrap {
    z-index: 402 !important
}

.c-modal {
    width: 280px !important
}

.c-modal-title {
    font-size: 16px !important;
    font-weight: 400 !important;
    padding-left: 10px !important;
    padding-right: 10px !important
}

.u-authicn-16 {
    display: inline-block;
    width: 16px;
    height: 16px;
    background: url(authicn_16_2x.png) no-repeat;
    background-size: 48px auto
}

.u-authicn16-yyr {
    background-position: -16px 0
}

.u-authicn16-v {
    background-position: 0 0
}

.u-authicn16-daren {
    background-position: -32px 0
}

.u-cover {
    position: relative;
    background: url() no-repeat;
    background-position: 50%;
    background-size: 100% auto
}

.u-cover img {
    display: inline-block;
    width: 100%;
    height: 100%
}

.u-face {
    position: relative;
    display: block;
    border-radius: 50%
}

.u-face img {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.u-cover-30,
.u-face-0 {
    width: 30px;
    height: 30px;
    background-size: 30px auto
}

.u-cover-40,
.u-cover-alb40,
.u-face-40 {
    width: 40px;
    height: 40px;
    background-size: 40px auto
}

.u-cover-alb2,
.u-face-1 {
    width: 50px;
    height: 50px;
    background-size: 50px auto
}

.u-svg {
    display: inline-block;
    vertical-align: middle;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat
}

.m-comments {
    word-break: break-all !important;
    word-break: break-word !important
}

@media screen and (-webkit-min-device-pixel-ratio:1.5) {
    .f-bd:after,
    .u-cover:after,
    .u-face:after {
        width: 150%;
        height: 150%;
        transform: scale(.666666)
    }
}

@media screen and (-webkit-min-device-pixel-ratio:2) {
    .f-bd:after {
        width: 200%;
        height: 200%;
        transform: scale(.5)
    }
    .u-cover:after,
    .u-face:after {
        width: 200%;
        height: 200%;
        transform: scale(.333333)
    }
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .f-bd-two.f-bd-full:after {
        border-width: 2px
    }
    .f-bd-two.f-bd-right:after {
        border-right-width: 2px
    }
    .f-bd:after {
        width: 300%;
        height: 300%;
        transform: scale(.333333)
    }
    .u-hmsprt {
        background-image: url(index_icon_2x.png)
    }
    .u-authicn-16 {
        background-image: url(authicn_16_3x.png)
    }
    .u-cover:after,
    .u-face:after {
        width: 300%;
        height: 300%;
        transform: scale(.333333)
    }
}

@media screen and (min-width:600px) {
    html {
        background-color: #eee
    }
    #j-app .g-web {
        width: 600px;
        min-height: 100%;
        margin: 0 auto
    }
    #j-app .g-web .u-btn-login {
        width: 400px
    }
    #j-app .g-web .footer {
        width: 600px;
        left: 50%;
        transform: translateX(-50%)
    }
}

@media only screen and (device-width:375px) and (device-height:812px) {
    .u-paddbm {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom)
    }
    .u-paddlr {
        padding-left: constant(safe-area-inset-left);
        padding-right: constant(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right)
    }
}

.o-btn {
    display: flex;
    position: relative;
    justify-content: center;
    align-items: center;
    border: none;
    box-sizing: border-box;
    background: transparent;
    outline: none;
    border-radius: 100px
}

.o-btn-red {
    width: 100%;
    height: 40px;
    background: #d33a31;
    color: #fff;
    font-size: 17px
}

.o-btn-red .dwrap {
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center
}

.o-btn-red .logo {
    display: inline-block;
    width: 23px;
    height: 23px;
    margin-right: 6px;
    fill: currentColor
}

.o-btn-red.z-newstyle {
    background-image: linear-gradient(90deg, #ff594a, #d33a31 96%)
}

.o-btn-redsml {
    width: 100%;
    height: 27px;
    background: #d33a31;
    color: #fff;
    font-size: 14px
}

.o-btn-redline {
    width: 100%;
    height: 40px;
    border: 1px solid #d33a31;
    color: #d33a31;
    font-size: 17px
}

.o-checkbox {
    display: flex;
    align-items: center
}

.o-checkbox .ckbtn {
    flex: 0 1 auto;
    display: inline-block;
    width: 19px;
    height: 19px;
    margin-right: 10px;
    border-radius: 22px;
    border: 1px solid rgba(0, 0, 0, .15)
}

.o-checkbox .ckbtn.z-opposite {
    margin: 0 0 0 10px
}

.o-checkbox svg {
    display: none
}

.o-checkbox.z-checked .ckbtn {
    background: #d33a31;
    border-color: #d33a31
}

.o-checkbox.z-checked .ckbtn svg {
    display: block
}

.o-checkbox.z-dis .ckbtn {
    opacity: .5;
    pointer-events: none
}

.o-checkbox .cktxt {
    font-size: 15px
}

.o-radio {
    display: flex;
    align-items: center
}

.o-radio .rdbtn {
    position: relative;
    width: 19px;
    height: 19px;
    margin-right: 5px;
    box-sizing: border-box;
    border-radius: 20px;
    border: 1px solid #ccc
}

.o-radio.z-checked .rdbtn:after {
    content: "";
    width: 9px;
    height: 9px;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 10px;
    background: #d33a31
}

.o-radio.z-dis .rdbtn {
    opacity: .8;
    pointer-events: none
}

.o-radio .rdtxt {
    font-size: 13px
}

.m-btnbar {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    height: 55px;
    padding: 0 30px;
    background: #fff
}

.m-btnbar-two {
    padding: 0 5px
}

.m-btnbar-two .btn {
    flex: 1 0 auto;
    width: 1%;
    margin: 0 5px
}

.m-btnbar-pay {
    padding: 0
}

.m-btnbar-pay .fullbtn {
    height: 100%;
    width: 100%;
    background: transparent;
    font-size: 17px;
    color: #d33a31
}

.m-btnbar-pay .paybtn {
    position: relative;
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    justify-content: center;
    width: 33.3333%;
    height: 100%;
    background: #d33a31;
    font-size: 17px;
    color: #fff
}

.m-btnbar-pay .payinfo {
    display: flex;
    width: 66.6667%;
    flex: 1 1 auto;
    height: 100%
}

.m-btnbar-pay .btnloading,
.o-btn .btnloading {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -15px 0 0 -15px;
    width: 30px;
    height: 30px;
    background-image: url("");
    background-size: 30px auto;
    -webkit-animation: load .72s infinite step-start
}

.m-btnbar-pay .paybtn .btnloading,
.o-btn.o-btn-red .btnloading,
.o-btn.o-btn-redsml .btnloading {
    background-image: url("")
}

.m-btnbar-pay .fullbtn .btnloading {
    background-image: url("")
}

@media screen and (width:320px) {
    .m-btnbar {
        padding: 0 20px
    }
    .m-btnbar-two {
        padding: 0 5px
    }
    .m-btnbar-pay {
        padding: 0
    }
    .m-btnbar-pay .paybtn,
    .o-btn-red {
        font-size: 16px
    }
}

.m-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    min-width: 70px;
    min-height: 30px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .8);
    transition: all .2s linear
}

.m-toast,
.m-toast.toast-entering {
    opacity: 0
}

.m-toast.toast-entered,
.m-toast.toast-exiting {
    opacity: 1
}

.m-toast.toast-exited {
    opacity: 0
}

.m-toast .text {
    line-height: 30px;
    font-size: 15px;
    color: #fff
}

.m-toast-center {
    margin-top: -100px;
    width: 180px;
    min-height: 116px;
    border-radius: 6px
}

.m-toast-center .icn {
    display: inline-block;
    width: 35px;
    height: 35px;
    margin: 25px 0 6px
}

.m-toast-center .text {
    line-height: 20px;
    padding: 0 15px 10px
}

.m-toast-top {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 70px;
    height: 30px;
    padding: 0 15px;
    border-radius: 15px;
    background: rgba(0, 0, 0, .6)
}

.m-toast-top,
.m-toast-top .text {
    line-height: 30px
}

.m-toast-top .icn {
    display: none;
    margin: 0
}

.m-toast-top.toast-entering {
    transform: translate(-50%, -100%);
    opacity: .5
}

.m-toast-top.toast-entered {
    transform: translate(-50%);
    opacity: 1
}

.m-toast-top.toast-exiting {
    transform: translate(-50%);
    opacity: .5
}

.m-toast-top.toast-exited {
    transform: translate(-50%, -100%);
    opacity: .01
}

.m-toast-loading {
    margin-top: -100px;
    width: 180px;
    min-height: 116px;
    border-radius: 6px
}

.m-toast-loading .icn {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 27px 0 6px;
    background: url("C9tJEnwLhYm4dvTdsukD0g==_19106213556354168.png") no-repeat;
    background-size: 30px 240px;
    background-position: 0 0;
    animation: toastload .72s infinite step-start
}

.m-toast-loading .text {
    line-height: 20px;
    padding: 0 15px 10px
}

@keyframes toastload {
    0% {
        background-position-y: 0
    }
    14.28% {
        background-position-y: -30px
    }
    28.56% {
        background-position-y: -60px
    }
    42.84% {
        background-position-y: -90px
    }
    57.12% {
        background-position-y: -120px
    }
    71.4% {
        background-position-y: -150px
    }
    85.68% {
        background-position-y: -180px
    }
    to {
        background-position-y: -210px
    }
}

.u-spin {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.u-spin_text {
    display: inline-block;
    min-width: 30px;
    background: url("0RX8forSK67QD7MDa4hp5g==_18582846023047943.gif") top no-repeat;
    background-size: 20px;
    padding-top: 30px;
    color: #333;
    text-align: center
}

.u-load-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 19px;
    height: 19px;
    background-image: url("S4EF0NcfGSdnsGxfoXF6GQ==_109951163115654967.jpg");
    background-repeat: no-repeat;
    background-size: 152px 19px;
    background-position: 0 0;
    animation: loadcircle .72s infinite step-start
}

.u-load-circle_30 {
    width: 30px;
    height: 30px;
    background: url("C9tJEnwLhYm4dvTdsukD0g==_19106213556354168.png") no-repeat;
    background-size: 30px 240px;
    background-position: 0 0;
    animation: loadcirclebig .72s infinite step-start
}

@keyframes ~":global(loadcircle)" {
    0% {
        background-position-x: 0
    }
    14.28% {
        background-position-x: -19px
    }
    28.56% {
        background-position-x: -38px
    }
    42.84% {
        background-position-x: -57px
    }
    57.12% {
        background-position-x: -76px
    }
    71.4% {
        background-position-x: -95px
    }
    85.68% {
        background-position-x: -114px
    }
    to {
        background-position-x: -133px
    }
}

@keyframes ~":global(loadcirclebig)" {
    0% {
        background-position-y: 0
    }
    14.28% {
        background-position-y: -30px
    }
    28.56% {
        background-position-y: -60px
    }
    42.84% {
        background-position-y: -90px
    }
    57.12% {
        background-position-y: -120px
    }
    71.4% {
        background-position-y: -150px
    }
    85.68% {
        background-position-y: -180px
    }
    to {
        background-position-y: -210px
    }
}

.u-login-auth .u-login_vfbt {
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    -webkit-appearance: none;
    border-radius: 0;
    border: 0;
    background-color: transparent
}

.u-login-auth .u-login_vfsp {
    box-sizing: border-box;
    font-size: 40px;
    color: #333;
    width: 48px;
    height: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    text-align: center
}

.u-login-auth .u-login_vfinp {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0 16px;
    justify-content: space-around
}

.u-login-auth .u-auth-count {
    margin-top: 10px
}

.modal-page .u-login-auth .u-auth-count {
    margin-top: 30px
}

.u-login-auth {
    box-sizing: border-box;
    background-color: #fbfcfd;
    height: 337px
}

.u-login-auth .message {
    width: 100%;
    padding: 6px 17px 8px;
    box-sizing: border-box;
    color: #999;
    font-size: 14px;
    line-height: 16px
}

.u-login-auth .inputlist {
    margin-top: 12px;
    width: 100%;
    position: relative
}

.u-login-auth .u-input-login:after {
    border-color: rgba(0, 0, 0, .3)
}

.u-login-auth .u-loading {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 10px;
    top: 1px;
    background-image: unset;
    left: unset
}

.u-login-auth .u-loading .u-load-circle {
    transform: translate(-50%, -50%) scale(.5)
}

.u-login-auth .countdown {
    line-height: 20px;
    color: #328ad4
}

.u-login-auth .countdown.z-dis {
    color: #999
}

.u-imgauth {
    display: flex;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box
}

.u-imgauth .u-input-login {
    flex: 1;
    width: 1%
}

.u-imgauth .imgauth_auth {
    display: flex;
    align-items: flex-end;
    width: 88px;
    overflow: hidden;
    margin-left: 10px
}

.u-imgauth .imgauth_img {
    display: block;
    width: 88px;
    height: 30px
}

.inputcover {
    padding: 0 16px
}

.inputcover,
.u-input-login {
    width: 100%;
    box-sizing: border-box
}

.u-input-login {
    height: 43px;
    line-height: 43px;
    display: flex
}

.u-input-login:after {
    border-color: rgba(0, 0, 0, .3)
}

.u-input-login .icon {
    flex: 0 0 auto;
    width: 18px;
    margin: 0 10px 0 3px;
    text-align: center
}

.u-input-login .inputbox {
    display: flex;
    flex: 1;
    width: 1%;
    color: #333;
    font-size: 16px
}

.u-input-login .inputbox .input {
    display: block;
    flex: 1;
    width: 1%;
    color: #333;
    font-size: 16px;
    border: none;
    outline: none
}

.u-input-login .inputbox .input::-webkit-input-placeholder {
    color: #ccc
}

.u-input-login .inputbox .input::-webkit-search-cancel-button {
    display: none
}

.u-input-login .inputbox .pre {
    display: block;
    flex: 0 0 auto;
    margin-right: 10px
}

.u-othermd {
    width: 100%;
    height: 125px;
    position: absolute;
    bottom: 0;
    box-sizing: border-box
}

.u-othermd .title {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 5px;
    color: #999;
    font-size: 13px
}

.u-othermd .title .line {
    flex: 1;
    display: block;
    width: 138px;
    height: 1px
}

.u-othermd .title .line.z-left {
    background-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .1))
}

.u-othermd .title .line.z-right {
    background-image: linear-gradient(270deg, transparent 0, rgba(0, 0, 0, .1))
}

.u-othermd .title .tt {
    flex: 0 0 auto;
    width: 90px;
    text-align: center
}

.u-othermd .otherlist {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 39px 0
}

.u-othermd .otherlist .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 50px;
    color: #000;
    font-size: 12px;
    line-height: 17px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.u-othermd .otherlist .u-svg {
    display: block
}

.u-othermd .otherlist .name {
    display: block;
    margin-top: 8px;
    color: #999
}

@media only screen and (device-height:812px) and (device-width:375px) {
    .m-othermd {
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom)
    }
}

.u-svg {
    display: inline-block;
    vertical-align: middle;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat
}

.u-svg-lglogo {
    width: 85px;
    height: 85px
}

.u-svg-otherlg {
    width: 41px;
    height: 41px
}

.u-svg-phone {
    width: 12px;
    height: 18px
}

.u-svg-password {
    width: 14px;
    height: 18px
}

.u-svg-email {
    width: 16px;
    height: 14px
}

.u-svg-authkey {
    height: 17px;
    width: 16px;
    height: 18px
}

.u-svg-payclose {
    width: 15px;
    height: 15px
}

.u-svg-zan {
    width: 12px;
    height: 12px
}

.u-svg-critic {
    width: 13px;
    height: 12px
}

.u-svg-played {
    width: 12px;
    height: 12px
}

.u-svg-playcount {
    width: 8px;
    height: 10px
}

.u-svg-duration {
    width: 12px;
    height: 12px
}

.u-svg-playvideo {
    width: 48px;
    height: 48px
}

.u-svg-playpgm {
    width: 24px;
    height: 24px
}

.u-svg-flradio {
    width: 17px;
    height: 17px
}

.u-svg-more {
    width: 5px;
    height: 9px
}

.u-svg-playvd {
    width: 46px;
    height: 46px
}

.u-svg-plus {
    width: 9px;
    height: 9px
}

.u-svg-fold,
.u-svg-unfold {
    width: 12px;
    height: 7px
}

.u-svg-orange,
.u-svg-white {
    width: 5px;
    height: 9px
}

.u-error-tip-bg {
    display: block;
    margin: 15px auto;
    width: 94px;
    height: 90px;
    background: url(nmOAqRPOhJ9-dW7PGmLiZA==_109951163320756945.png) 0 0/contain no-repeat
}

.u-text-tips {
    text-align: center;
    color: #999;
    letter-spacing: 1px;
    line-height: 1.6
}

.modal-page .u-error-tip-bg {
    margin-top: 40%
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .u-lderror .image {
        background-image: url(xXQgqCtftT81AARc6m-big==_109951163320758925.png)
    }
}

.u-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900
}

.u-login,
.u-register {
    box-sizing: border-box;
    position: absolute;
    display: block;
    width: 100%;
    height: 372px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 1000;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -webkit-overflow-scrolling: touch
}

.u-login input:-webkit-autofill,
.u-register input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fff inset
}

.u-login .u-close,
.u-register .u-close {
    position: absolute;
    display: block;
    font-size: 20px;
    right: 0;
    top: 0;
    color: #333;
    width: 20px;
    height: 20px;
    border: 1px solid #eee;
    text-align: center;
    line-height: 100%;
    border-radius: 50%
}

.u-login .btnbox,
.u-register .btnbox {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 18px;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box
}

.u-login .reset,
.u-register .reset {
    display: inline-block;
    padding: 0;
    color: #999;
    font-size: 14px;
    line-height: 16px;
    border-bottom: 1px solid #999
}

.u-login .prev-step,
.u-register .prev-step {
    box-sizing: border-box;
    height: 40px;
    display: block;
    width: 100%;
    background-color: #fff;
    line-height: 40px;
    font-size: 14px;
    color: #333;
    padding-left: 11px;
    border-bottom: 1px solid #eee
}

.u-login .message,
.u-register .message {
    width: 100%;
    padding: 6px 17px 8px;
    box-sizing: border-box;
    color: #999;
    font-size: 14px;
    line-height: 16px
}

.u-login .u-logo-bg,
.u-register .u-logo-bg {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 125px;
    background: url(7DqDzyEYBBo1Wqsf_ikT3g==_109951163325418757.png) no-repeat;
    background-position: bottom;
    background-size: contain;
    background-origin: border-box
}

.u-login .u-form-info,
.u-register .u-form-info {
    box-sizing: border-box;
    padding: 0 16px;
    width: 100%;
    line-height: 30px;
    margin-bottom: -15px
}

.u-login .u-form-info .u-login-tip,
.u-register .u-form-info .u-login-tip {
    background: url("") 0 no-repeat;
    background-size: 14px;
    padding-left: 20px;
    color: #d43b32;
    font-size: 12px
}

.u-login .u-form,
.u-register .u-form {
    display: flex;
    flex-direction: column;
    align-items: center
}

.u-login .u-form-item,
.u-register .u-form-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.u-login .u-btn-dis,
.u-register .u-btn-dis {
    opacity: .5
}

.u-login .u-title,
.u-register .u-title {
    text-align: center;
    margin: 10px auto;
    font-size: 18px;
    color: #333
}

.u-login .u-modal-btn,
.u-register .u-modal-btn {
    margin: 15px 16px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.u-login .u-modal-normal-btn,
.u-register .u-modal-normal-btn {
    margin: 0 16px 15px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.u-login .u-login_tip,
.u-register .u-login_tip {
    width: 100%;
    background: url("") 0 no-repeat;
    background-size: 14px;
    margin: 0 16px 10px;
    padding-left: 20px;
    color: #d43b32;
    font-size: 12px;
    line-height: 30px
}

.u-login .z-dis,
.u-register .z-dis {
    opacity: .6
}

.u-login-phone,
.u-loginick,
.u-register {
    height: 337px
}

.u-loginick {
    overflow-x: hidden
}

.u-loginick .nick_scap {
    padding: 0 16px;
    margin-top: 15px;
    text-align: center
}

.modal-page .u-login,
.modal-page .u-register {
    border-radius: 0;
    height: 100%
}

.modal-page .u-login .u-logo-bg,
.modal-page .u-register .u-logo-bg {
    padding-top: 60%
}

.modal-page .u-login .u-modal-btn,
.modal-page .u-register .u-modal-btn {
    margin-top: 30px
}

.modal-page .u-login {
    background: url(fDH7dxtwDwHy7i7IzyeLzQ==_109951163312792350.png) 0 0/cover no-repeat;
    background-color: #fff
}

.modal-page .u-login-phone {
    background-image: none;
    background-color: #fff
}

.modal-page .u-form {
    padding-top: 12px
}

.modal-page .u-form-info {
    margin-bottom: -30px
}

.modal-page .u-loginick .nick_scap {
    margin-top: 30px
}

.u-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .6);
    height: 100%;
    width: 100%;
    z-index: 900
}

.modal-appear,
.modal-enter {
    transform: translateY(100%)
}

.modal-enter-active {
    transition: transform .3s ease-out
}

.modal-appear-active,
.modal-enter-active,
.modal-enter-done {
    transform: translateY(0)
}

.modal-appear-active {
    transition: transform .3s ease-out
}

.input {
    outline: none
}

.pay-spin {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: url(0RX8forSK67QD7MDa4hp5g==_18582846023047943.gif) 50% no-repeat;
    background-size: 20px
}

.pay-lderror {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 40px 0
}

.pay-lderror .image {
    display: block;
    width: 94px;
    height: 90px;
    background: url(k8jYAwbkCLscBirKuhXvWQ==_18641120139379761.png) 0 0/contain no-repeat
}

.pay-lderror .text {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    line-height: 25px;
    color: #666
}

.m-payask {
    position: relative
}

.m-payask .pay-svg {
    vertical-align: initial
}

.pay_exp {
    position: absolute;
    top: -64px;
    width: 140px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, .8);
    border-radius: 12px;
    box-sizing: border-box;
    color: #fff;
    font-size: 12px;
    font-style: normal
}

.pay_exp .payep_arow {
    position: absolute;
    left: 62px;
    bottom: -16px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-top-color: rgba(0, 0, 0, .8)
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .u-lderror .image {
        background-image: url(_tKwwqIJG5flyT04_3_v1w==_18539965069590522.png)
    }
}

.pay-btn {
    display: inline-block;
    height: 36px;
    line-height: 36px;
    padding: 0 6px;
    border: 1px solid #adadad;
    border-radius: 4px;
    font-size: 15px;
    background-color: #fff;
    text-align: center;
    box-sizing: border-box
}

.pay-btn-dis {
    opacity: .5
}

.pay-btn-block {
    display: block;
    width: 100%
}

.pay-btn-red {
    color: #fff;
    background-color: #d43b32;
    border-color: #d43b32
}

.pay-svg {
    display: inline-block;
    vertical-align: middle;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat
}

.pay-svg-payclose {
    width: 15px;
    height: 15px
}

.pay-svg-ask {
    width: 16px;
    height: 16px
}

.m-paycover {
    bottom: 0;
    right: 0;
    z-index: 301
}

.m-paycover,
.m-paywin {
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden
}

.m-paywin {
    width: 100%;
    height: 100%;
    z-index: 302;
    background-color: rgba(0, 0, 0, .6)
}

.m-paywin .img {
    display: block;
    width: 100%;
    height: 100%
}

.m-paywin .m-paybox {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 255px;
    background-color: #fff
}

.m-paywin .m-paybox .close {
    position: absolute;
    top: 10px;
    right: 5px;
    width: 15px;
    height: 15px;
    padding: 5px;
    line-height: 0;
    z-index: 101
}

.m-paywin .m-paybox .header {
    display: -ms-flexbox;
    display: flex;
    padding: 15px 10px
}

.m-paywin .m-paybox .radiopic {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 90px;
    height: 90px;
    margin-right: 10px
}

.m-paywin .m-paybox .title {
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    color: #333;
    font-size: 17px;
    line-height: 20px;
    padding-top: 14px
}

.m-paywin .m-paybox .pay_price {
    margin-top: 7px;
    margin-left: -2px;
    color: #d33a31;
    font-size: 14px;
    line-height: 27px
}

.m-paywin .m-paybox .pay_price>ins {
    font-size: 21px;
    text-decoration: none
}

.m-paywin .m-paybox .pay_price>del {
    color: #999;
    margin-left: 10px;
    text-decoration: line-through
}

.m-paywin .m-paybox .pay_tip {
    color: #fe672e;
    font-size: 14px;
    position: relative;
    z-index: 102;
    padding-right: 21px;
    height: 20px;
    line-height: 20px
}

.m-paywin .m-paybox .pay_tpdsc {
    display: inline-block
}

.m-paywin .m-paybox .pay_ask {
    position: absolute;
    padding-top: 2px;
    margin-left: 5px
}

.m-paywin .m-paybox .desc {
    padding: 3px 10px 15px;
    color: #333;
    font-size: 14px;
    line-height: 18px
}

.m-paywin .m-paybox .desc .user {
    color: #328ad4
}

.m-paywin .m-paybox .desc .declare {
    padding-top: 6px;
    color: #999
}

.m-paywin .m-paybox .qcount {
    padding: 0 10px;
    margin: 2px 0 20px
}

.m-paywin .m-paybox .qcount_tl {
    font-size: 14px
}

.m-paywin .m-paybox .qcount_opa {
    display: -ms-flexbox;
    display: flex;
    width: 160px;
    height: 35px;
    margin-top: 7px
}

.m-paywin .m-paybox .qcount_opa:after {
    border-color: #999;
    border-radius: .21971831%
}

.m-paywin .m-paybox .qcount_scom,
.m-paywin .m-paybox .qcount_sh {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.m-paywin .m-paybox .qcount_scom {
    position: relative;
    width: 35px;
    font-size: 40px
}

.m-paywin .m-paybox .qcount_scom:after {
    content: " ";
    position: absolute;
    left: 12px;
    top: 17px;
    width: 11px;
    height: 1px;
    background-color: #666
}

.m-paywin .m-paybox .qcount_scom.z-dis:after {
    background-color: #d1d1d1
}

.m-paywin .m-paybox .qcount_add:before {
    content: " ";
    position: absolute;
    left: 17px;
    top: 12px;
    height: 11px;
    width: 1px;
    background-color: #666
}

.m-paywin .m-paybox .qcount_add.z-dis:before {
    background-color: #d1d1d1
}

.m-paywin .m-paybox .qcount_sh {
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    font-size: 15px
}

.m-paywin .m-paybox .qcount_sh:after {
    border-color: #999
}

.m-paywin .paybtn {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding: 8px 0;
    text-align: center
}

.m-paywin .paybtn .u-btn-login2 {
    display: inline-block;
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    height: 40px;
    margin: 0 30px;
    line-height: 40px;
    border-radius: 40px
}

.m-paywin .paybtn .u-btn-login2:before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-top: -4px;
    margin-right: 7px;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    vertical-align: middle
}

.m-paywin .paybtn .u-btn-login2.pay-zfb:before {
    background-image: url("")
}

.m-paywin .paybtn .u-btn-login2.pay-wx:before {
    background-image: url("")
}

.u-login-auth .u-login_vfbt {
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    z-index: 2;
    opacity: 0;
    -webkit-appearance: none;
    border-radius: 0;
    border: 0;
    background-color: transparent
}

.u-login-auth .u-login_vfsp {
    box-sizing: border-box;
    font-size: 40px;
    color: #333;
    width: 48px;
    height: 60px;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    text-align: center
}

.u-login-auth .u-login_vfinp {
    display: -ms-flexbox;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 0 16px;
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.u-login-auth .u-auth-count {
    margin-top: 10px
}

.modal-page .u-login-auth .u-auth-count {
    margin-top: 30px
}

.u-login-auth {
    box-sizing: border-box;
    background-color: #fbfcfd;
    height: 337px
}

.u-login-auth .message {
    width: 100%;
    padding: 6px 17px 8px;
    box-sizing: border-box;
    color: #999;
    font-size: 14px;
    line-height: 16px
}

.u-login-auth .inputlist {
    margin-top: 12px;
    width: 100%;
    position: relative
}

.u-login-auth .u-input-login:after {
    border-color: rgba(0, 0, 0, .3)
}

.u-login-auth .u-loading {
    position: relative;
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 10px;
    top: 1px;
    background-image: unset;
    left: unset
}

.u-login-auth .u-loading .u-load-circle {
    transform: translate(-50%, -50%) scale(.5)
}

.u-login-auth .countdown {
    line-height: 20px;
    color: #328ad4
}

.u-login-auth .countdown.z-dis {
    color: #999
}

.u-imgauth {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box
}

.u-imgauth .u-input-login {
    -ms-flex: 1;
    flex: 1;
    width: 1%
}

.u-imgauth .imgauth_auth {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 88px;
    overflow: hidden;
    margin-left: 10px
}

.u-imgauth .imgauth_img {
    display: block;
    width: 88px;
    height: 30px
}

.inputcover {
    padding: 0 16px
}

.inputcover,
.u-input-login {
    width: 100%;
    box-sizing: border-box
}

.u-input-login {
    height: 43px;
    line-height: 43px;
    display: -ms-flexbox;
    display: flex
}

.u-input-login:after {
    border-color: rgba(0, 0, 0, .3)
}

.u-input-login .icon {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 18px;
    margin: 0 10px 0 3px;
    text-align: center
}

.u-input-login .inputbox {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    color: #333;
    font-size: 16px
}

.u-input-login .inputbox .input {
    display: block;
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    color: #333;
    font-size: 16px;
    border: none;
    outline: none
}

.u-input-login .inputbox .input::-webkit-input-placeholder {
    color: #ccc
}

.u-input-login .inputbox .input::-webkit-search-cancel-button {
    display: none
}

.u-input-login .inputbox .pre {
    display: block;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 10px
}

.u-othermd {
    width: 100%;
    height: 125px;
    position: absolute;
    bottom: 0;
    box-sizing: border-box
}

.u-othermd .title {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    padding: 0 5px;
    color: #999;
    font-size: 13px
}

.u-othermd .title .line {
    -ms-flex: 1;
    flex: 1;
    display: block;
    width: 138px;
    height: 1px
}

.u-othermd .title .line.z-left {
    background-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .1))
}

.u-othermd .title .line.z-right {
    background-image: linear-gradient(270deg, transparent 0, rgba(0, 0, 0, .1))
}

.u-othermd .title .tt {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 90px;
    text-align: center
}

.u-othermd .otherlist {
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 16px 39px 0
}

.u-othermd .otherlist,
.u-othermd .otherlist .item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.u-othermd .otherlist .item {
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 50px;
    color: #000;
    font-size: 12px;
    line-height: 17px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.u-othermd .otherlist .u-svg {
    display: block
}

.u-othermd .otherlist .name {
    display: block;
    margin-top: 8px;
    color: #999
}

@media only screen and (device-height:812px) and (device-width:375px) {
    .m-othermd {
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom)
    }
}

.u-svg {
    display: inline-block;
    vertical-align: middle;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat
}

.u-svg-lglogo {
    width: 85px;
    height: 85px
}

.u-svg-otherlg {
    width: 41px;
    height: 41px
}

.u-svg-phone {
    width: 12px;
    height: 18px
}

.u-svg-password {
    width: 14px;
    height: 18px
}

.u-svg-email {
    width: 16px;
    height: 14px
}

.u-svg-authkey {
    height: 17px;
    width: 16px;
    height: 18px
}

.u-svg-payclose {
    width: 15px;
    height: 15px
}

.u-svg-zan {
    width: 12px;
    height: 12px
}

.u-svg-critic {
    width: 13px;
    height: 12px
}

.u-svg-played {
    width: 12px;
    height: 12px
}

.u-svg-playcount {
    width: 8px;
    height: 10px
}

.u-svg-duration {
    width: 12px;
    height: 12px
}

.u-svg-playvideo {
    width: 48px;
    height: 48px
}

.u-svg-playpgm {
    width: 24px;
    height: 24px
}

.u-svg-flradio {
    width: 17px;
    height: 17px
}

.u-svg-more {
    width: 5px;
    height: 9px
}

.u-svg-playvd {
    width: 46px;
    height: 46px
}

.u-svg-plus {
    width: 9px;
    height: 9px
}

.u-svg-fold,
.u-svg-unfold {
    width: 12px;
    height: 7px
}

.u-svg-orange,
.u-svg-white {
    width: 5px;
    height: 9px
}

.u-error-tip-bg {
    display: block;
    margin: 15px auto;
    width: 94px;
    height: 90px;
    background: url(nmOAqRPOhJ9-dW7PGmLiZA==_109951163320756945.png) 0 0/contain no-repeat
}

.u-text-tips {
    text-align: center;
    color: #999;
    letter-spacing: 1px;
    line-height: 1.6
}

.modal-page .u-error-tip-bg {
    margin-top: 40%
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .u-lderror .image {
        background-image: url(xXQgqCtftT81AARc6m-big==_109951163320758925.png)
    }
}

.u-modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 900
}

.u-login,
.u-register {
    box-sizing: border-box;
    position: absolute;
    display: block;
    width: 100%;
    height: 372px;
    bottom: 0;
    left: 0;
    overflow: hidden;
    z-index: 1000;
    background-color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    -webkit-overflow-scrolling: touch
}

.u-login input:-webkit-autofill,
.u-register input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px #fff inset
}

.u-login .u-close,
.u-register .u-close {
    position: absolute;
    display: block;
    font-size: 20px;
    right: 0;
    top: 0;
    color: #333;
    width: 20px;
    height: 20px;
    border: 1px solid #eee;
    text-align: center;
    line-height: 100%;
    border-radius: 50%
}

.u-login .btnbox,
.u-register .btnbox {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 18px;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box
}

.u-login .reset,
.u-register .reset {
    display: inline-block;
    padding: 0;
    color: #999;
    font-size: 14px;
    line-height: 16px;
    border-bottom: 1px solid #999
}

.u-login .prev-step,
.u-register .prev-step {
    box-sizing: border-box;
    height: 40px;
    display: block;
    width: 100%;
    background-color: #fff;
    line-height: 40px;
    font-size: 14px;
    color: #333;
    padding-left: 11px;
    border-bottom: 1px solid #eee
}

.u-login .message,
.u-register .message {
    width: 100%;
    padding: 6px 17px 8px;
    box-sizing: border-box;
    color: #999;
    font-size: 14px;
    line-height: 16px
}

.u-login .u-logo-bg,
.u-register .u-logo-bg {
    display: block;
    width: 100%;
    height: 0;
    padding-top: 125px;
    background: url(7DqDzyEYBBo1Wqsf_ikT3g==_109951163325418757.png) no-repeat;
    background-position: bottom;
    background-size: contain;
    background-origin: border-box
}

.u-login .u-form-info,
.u-register .u-form-info {
    box-sizing: border-box;
    padding: 0 16px;
    width: 100%;
    line-height: 30px;
    margin-bottom: -15px
}

.u-login .u-form-info .u-login-tip,
.u-register .u-form-info .u-login-tip {
    background: url("") 0 no-repeat;
    background-size: 14px;
    padding-left: 20px;
    color: #d43b32;
    font-size: 12px
}

.u-login .u-form,
.u-register .u-form {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center
}

.u-login .u-form-item,
.u-register .u-form-item {
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative
}

.u-login .u-btn-dis,
.u-register .u-btn-dis {
    opacity: .5
}

.u-login .u-title,
.u-register .u-title {
    text-align: center;
    margin: 10px auto;
    font-size: 18px;
    color: #333
}

.u-login .u-modal-btn,
.u-register .u-modal-btn {
    margin: 15px 16px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.u-login .u-modal-normal-btn,
.u-register .u-modal-normal-btn {
    margin: 0 16px 15px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

.u-login .u-login_tip,
.u-register .u-login_tip {
    width: 100%;
    background: url("") 0 no-repeat;
    background-size: 14px;
    margin: 0 16px 10px;
    padding-left: 20px;
    color: #d43b32;
    font-size: 12px;
    line-height: 30px
}

.u-login .z-dis,
.u-register .z-dis {
    opacity: .6
}

.u-login-phone,
.u-loginick,
.u-register {
    height: 337px
}

.u-loginick {
    overflow-x: hidden
}

.u-loginick .nick_scap {
    padding: 0 16px;
    margin-top: 15px;
    text-align: center
}

.modal-page .u-login,
.modal-page .u-register {
    border-radius: 0;
    height: 100%
}

.modal-page .u-login .u-logo-bg,
.modal-page .u-register .u-logo-bg {
    padding-top: 60%
}

.modal-page .u-login .u-modal-btn,
.modal-page .u-register .u-modal-btn {
    margin-top: 30px
}

.modal-page .u-login {
    background: url(fDH7dxtwDwHy7i7IzyeLzQ==_109951163312792350.jpg) 0 0/cover no-repeat;
    background-color: #fff
}

.modal-page .u-login-phone {
    background-image: none;
    background-color: #fff
}

.modal-page .u-form {
    padding-top: 12px
}

.modal-page .u-form-info {
    margin-bottom: -30px
}

.modal-page .u-loginick .nick_scap {
    margin-top: 30px
}

.u-mask {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .6);
    height: 100%;
    width: 100%;
    z-index: 900
}

.modal-appear,
.modal-enter {
    transform: translateY(100%)
}

.modal-enter-active {
    transition: transform .3s ease-out
}

.modal-appear-active,
.modal-enter-active,
.modal-enter-done {
    transform: translateY(0)
}

.modal-appear-active {
    transition: transform .3s ease-out
}

.c-toast {
    position: fixed;
    display: table;
    left: 50%;
    top: 50%;
    color: #fff;
    border-radius: 4px;
    padding: 10px 20px;
    min-width: 100px;
    max-width: 240px;
    line-height: 1.4;
    text-align: center;
    word-wrap: break-word;
    word-break: break-word;
    background-color: rgba(0, 0, 0, .6);
    transform: translate(-50%, -50%);
    z-index: 1000
}

.toastmask-enter {
    opacity: .1
}

.toastmask-enter.toastmask-active {
    opacity: 1;
    transition: opacity .3s ease-in
}

.toastmask-appear {
    opacity: .1
}

.toastmask-appear.toastmask-appear-active {
    opacity: 1;
    transition: opacity .3s ease-in
}

.toastmask-exit {
    opacity: 1
}

.toastmask-exit.toastmask-exit-active {
    opacity: 0;
    transition: opacity .3s ease-out
}

.cm-mask {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 120;
    background-color: rgba(0, 0, 0, .4)
}

.cmmask-enter {
    opacity: .5
}

.cmmask-enter.cmmask-enter-active {
    opacity: 1;
    transition: opacity .2s ease-in
}

.cmmask-appear {
    opacity: .5
}

.cmmask-appear.cmmask-appear-active {
    opacity: 1;
    transition: opacity .2s ease-in
}

.cmmask-exit {
    opacity: 1
}

.cmmask-exit.cmmask-exit-active {
    opacity: 0;
    transition: opacity .2s ease-out
}

.cmmodal-scale-enter {
    transform: scale(.2);
    transform-origin: center
}

.cmmodal-scale-enter.cmmodal-scale-enter-active {
    transform: scale(1);
    transition: transform .2s ease-out
}

.cmmodal-scale-appear {
    transform: scale(.2)
}

.cmmodal-scale-appear.cmmodal-scale-appear-active {
    transform: scale(1);
    transition: transform .2s ease-out
}

.cmmodal-scale-exit {
    transform: scale(1)
}

.cmmodal-scale-exit.cmmodal-scale-exit-active {
    transform: scale(.2);
    transition: transform .2s ease-out
}

.c-modal-wrap {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 121;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.c-modal,
.c-modal-wrap {
    display: -ms-flexbox;
    display: flex
}

.c-modal {
    width: 270px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 8px;
    -ms-flex-direction: column;
    flex-direction: column
}

.c-modal-title {
    -ms-flex-pack: center;
    font-size: 18px;
    font-weight: 700;
    padding: 15px 22px 0
}

.c-modal-content,
.c-modal-title {
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    line-height: 1.2
}

.c-modal-content {
    -ms-flex: 1;
    flex: 1;
    height: 100%;
    padding: 0 22px;
    margin-top: 5px;
    min-height: 40px;
    font-size: 14px;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    overflow: hidden
}

.c-modal-bottom {
    position: relative;
    -ms-flex: 1;
    flex: 1;
    display: -ms-flexbox;
    display: flex;
    margin-top: 15px;
    height: 44px;
    min-height: 44px;
    line-height: 44px;
    text-align: center;
    overflow: hidden
}

.c-modal-bottom:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 200%;
    transform: scale(.5);
    transform-origin: left top;
    height: 1px;
    background-color: #dbdbdb
}

.c-modal-bton {
    position: relative;
    display: block;
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    color: #0076ff;
    font-size: 17px;
    overflow: hidde
}

.c-modal-bton:last-child:after {
    display: none
}

.c-modal-bton:after {
    content: " ";
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 200%;
    transform: scale(.5);
    transform-origin: left top;
    background-color: #dbdbdb
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .c-modal-bottom:after {
        width: 300%;
        transform: scale(.33)
    }
    .c-modal-bton:after {
        height: 300%;
        transform: scale(.33)
    }
}

.u-spin {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.u-spin_text {
    display: inline-block;
    min-width: 30px;
    background: url("0RX8forSK67QD7MDa4hp5g==_18582846023047943.gif") top no-repeat;
    background-size: 20px;
    padding-top: 30px;
    color: #333;
    text-align: center
}

.u-load-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 19px;
    height: 19px;
    background-image: url("S4EF0NcfGSdnsGxfoXF6GQ==_109951163115654967.jpg");
    background-repeat: no-repeat;
    background-size: 152px 19px;
    background-position: 0 0;
    animation: loadcircle .72s infinite step-start
}

.u-load-circle_30 {
    width: 30px;
    height: 30px;
    background: url("C9tJEnwLhYm4dvTdsukD0g==_19106213556354168.png") no-repeat;
    background-size: 30px 240px;
    background-position: 0 0;
    animation: loadcirclebig .72s infinite step-start
}

@keyframes loadcircle {
    0% {
        background-position-x: 0
    }
    14.28% {
        background-position-x: -19px
    }
    28.56% {
        background-position-x: -38px
    }
    42.84% {
        background-position-x: -57px
    }
    57.12% {
        background-position-x: -76px
    }
    71.4% {
        background-position-x: -95px
    }
    85.68% {
        background-position-x: -114px
    }
    to {
        background-position-x: -133px
    }
}

@keyframes loadcirclebig {
    0% {
        background-position-y: 0
    }
    14.28% {
        background-position-y: -30px
    }
    28.56% {
        background-position-y: -60px
    }
    42.84% {
        background-position-y: -90px
    }
    57.12% {
        background-position-y: -120px
    }
    71.4% {
        background-position-y: -150px
    }
    85.68% {
        background-position-y: -180px
    }
    to {
        background-position-y: -210px
    }
}

.m-home {
    background-color: #fcfcfd;
    min-height: 100%
}

.m-home .m-tabarea-index {
    padding-top: 40px
}

.m-tabarea-index .u-tab {
    position: fixed;
    top: 64px;
    left: 0;
    z-index: 100
}

.m-tabarea-index.z-native .u-tab {
    top: 0
}

.m-tabarea-index .u-tab:after {
    border-color: #ccc;
    z-index: 0
}

li,
ul {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

li {
    list-style: none
}

.m-tabarea {
    margin: 0 auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-user-select: none
}

.u-tab {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 40px;
    background: #fff
}

.u-tab .tabtitle {
    -ms-flex: 1;
    flex: 1;
    display: block;
    width: 30%;
    height: 100%;
    text-align: center;
    cursor: pointer
}

.u-tab .tabtxt {
    position: relative;
    display: inline-block;
    max-width: 100%;
    height: 100%;
    padding: 0 5px;
    box-sizing: border-box;
    color: #333;
    font-size: 15px;
    line-height: 40px
}

.u-tab .tabtxt .tt {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.u-tab .tabtxt .subtt {
    margin-left: 5px;
    color: #999;
    font-size: 13px;
    font-style: normal;
    vertical-align: baseline
}

.u-tab .tabtxt .subtt.z-pre {
    margin-left: 0;
    margin-right: 5px
}

.u-tab .z-selected .tabtxt {
    color: #d33a31
}

.u-tab .z-selected .tabtxt:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    z-index: 3;
    width: 100%;
    height: 4px;
    transform: scaleY(.5);
    background: #d33a31
}

.m-tabarea .m-tabct {
    display: block;
}

.m-tabarea .m-tabct,
.m-tabct .tabctitem {
    width: 100%;
    height: 100%
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .u-tab .tabtitle.z-selected .tabborder {
        height: 6px;
        bottom: -2px;
        transform: scaleY(.333333)
    }
}

.m-gidown_mask {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .8);
    z-index: 150
}

.m-gidown {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: end;
    justify-content: flex-end;
    height: 120px;
    margin: 0 10px;
    border-radius: 0 0 8px 8px;
    background: #f9f9f9 url("") 100% 4px no-repeat;
    background-size: 127px auto
}

.m-gidown-wrap {
    width: 160px;
    line-height: 20px;
    padding: 39px 58px 0 0
}

.m-gidown-h3 {
    margin: 0;
    font-size: 20px;
    margin-bottom: 6px
}

.m-gidown-cont {
    margin: 0;
    font-size: 14px
}

.m-gidown-em {
    margin: 0 6px;
    color: #e3534b
}

.guidemask-enter {
    opacity: .1;
    z-index: 100
}

.guidemask-enter.guidemask-enter-active {
    opacity: 1;
    transition: opacity .3s ease-in
}

.guidemask-appear {
    opacity: .1
}

.guidemask-appear.guidemask-appear-active {
    opacity: 1;
    transition: opacity .3s ease-in
}

.guidemask-exit {
    opacity: 1;
    z-index: 100
}

.guidemask-exit.guidemask-exit-active {
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.m-hometop {
    height: 64px
}

.m-hometop .topfix {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
    width: 100%;
    height: 64px;
    background-color: #d43c33;
    box-sizing: border-box
}

.m-hometop .topsvg {
    position: absolute;
    left: 0;
    top: 0;
    width: 142px;
    height: 25px
}

.m-hometop .topfl {
    position: relative;
    width: 142px;
    height: 25px
}

.m-hometop .topplh {
    opacity: 0;
    color: #d43c33
}

.m-hometop .topbton {
    position: relative;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    color: #fff;
    font-size: 15px
}

.m-hometop .topbton:after {
    border-color: #fff;
    border-radius: 37.5%/100%
}

.m-homeremd {
    padding-top: 20px
}

.m-homeremd .remd_tl {
    position: relative;
    padding-left: 9px;
    margin-bottom: 14px;
    font-size: 17px;
    height: 20px;
    line-height: 20px
}

.m-homeremd .remd_tl:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -9px;
    width: 2px;
    height: 16px;
    background-color: #d33a31
}

.m-homeremd .remd_songs {
    position: relative;
    padding-bottom: 24px
}

.m-homeremd .remd_ul {
    padding-bottom: 16px
}

.m-homeremd .remd_ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    overflow: hidden;
    content: "."
}

.m-homeremd .remd_li {
    display: block;
    float: left;
    width: 33.3%;
    padding-left: 1px;
    padding-right: 1px;
    box-sizing: border-box
}

.m-homeremd .remd_li:first-child {
    padding-left: 0;
    padding-right: 2px
}

.m-homeremd .remd_li:last-child {
    padding-left: 2px;
    padding-right: 0
}

.m-homeremd .remd_img {
    position: relative;
    padding-bottom: 100%
}

.m-homeremd .remd_img>.u-img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1
}

.m-homeremd .remd_img:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20px;
    z-index: 2;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent)
}

.m-homeremd .remd_high {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    width: 20px;
    height: 20px;
    background: url() 0 no-repeat;
    background-size: contain
}

.m-homeremd .remd_lnum {
    position: absolute;
    right: 5px;
    top: 2px;
    z-index: 3;
    padding-left: 13px;
    color: #fff;
    font-size: 12px;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 11px 10px;
    text-shadow: 1px 0 0 rgba(0, 0, 0, .15)
}

.m-homeremd .remd_text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 6px 2px 0 6px;
    line-height: 1.2;
    font-size: 13px
}

.m-homeremd .remd_newsg {
    position: relative;
    min-height: 20px
}

@media only screen and (device-width:375px) and (device-height:812px) {
    .m-homeremd {
        padding-left: constant(safe-area-inset-left);
        padding-right: constant(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right)
    }
}

.u-spin {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
    width: 100%;
    height: 100%;
    background: url() 50% no-repeat;
    background-size: 20px
}

.u-lderror {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 40px 0
}

.u-lderror .image {
    display: block;
    width: 94px;
    height: 90px;
    background: url(authicn_16_2x.png) 0 0/contain no-repeat
}

.u-lderror .text {
    display: block;
    margin-top: 10px;
    font-size: 14px;
    line-height: 25px;
    color: #666
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .u-lderror .image {
        background-image: url(load_error_3x.png)
    }
}

.m-sgitem {
    padding-left: 10px
}

.m-sgitem,
.m-sgitem .sgfl {
    display: -ms-flexbox;
    display: flex
}

.m-sgitem .sgfl {
    -ms-flex-align: center;
    align-items: center;
    width: 28px;
    font-size: 17px;
    color: #999
}

.m-sgitem .sgfl-cred {
    color: #df3436
}

.m-sgitem .sgfr {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: -ms-flexbox;
    display: flex;
    position: relative
}

.m-sgitem .sgchfl {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 6px 0;
    width: 0
}

.m-sgitem .sghot {
    display: inline-block;
    width: 12px;
    height: 8px;
    margin-right: 4px
}

.m-sgitem .sgtl {
    font-size: 17px
}

.m-sgitem .sgalia {
    color: #888;
    margin-left: 4px
}

.m-sgitem .sginfo {
    font-size: 12px;
    color: #888
}

.m-sgitem .sgchfr {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px
}

.m-sgitem .sgchply {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-position: -24px 0
}

.m-sgitem-gray,
.m-sgitem-gray .hcover .highlight,
.m-sgitem-gray .sgalia,
.m-sgitem-gray .sgfl,
.m-sgitem-gray .sginfo {
    color: #ccc
}

.hcover {
    display: inline
}

.hcover .highlight {
    color: #507daf
}

.buymask {
    z-index: 101;
    background-color: rgba(0, 0, 0, .6)
}

.buymask,
.m-buywin {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0
}

.m-buywin {
    z-index: 102;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center
}

.m-buywin .buywin_wrap {
    position: relative;
    width: 67.63%;
    min-width: 250px;
    max-width: 320px
}

.m-buywin .buywin_close {
    position: absolute;
    width: 27px;
    height: 27px;
    background: url() no-repeat;
    background-size: contain;
    right: -13px;
    top: -13px;
    z-index: 10
}

.m-buywin .buywin_iner {
    border-radius: 2px;
    background-color: #fff;
    overflow: hidden
}

.m-buywin .buywin_pic {
    position: relative;
    padding-bottom: 48.2%;
    overflow: hidden
}

.m-buywin .buywin_img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%
}

.m-buywin .buywin_cont {
    padding: 5.35% 7.14%
}

.m-buywin .buywin_p {
    font-size: 14px;
    color: #666;
    line-height: 1.3
}

.m-buywin .buywin_bottom {
    background-color: #e94339;
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 40px;
    font-size: 17px;
    margin-top: 18px
}

.buymask-enter {
    opacity: .5
}

.buymask-enter.buymask-enter-active {
    opacity: 1;
    transition: opacity .3s ease-in
}

.buymask-appear {
    opacity: .5
}

.buymask-appear.buymask-appear-active {
    opacity: 1;
    transition: opacity .2s ease-in
}

.buymask-leave {
    opacity: 1
}

.buymask-leave.buymask-leave-active {
    opacity: 0;
    transition: opacity .2s ease-out
}

.mbuywin-scale-enter {
    transform: scale(.2);
    transform-origin: center
}

.mbuywin-scale-enter.mbuywin-scale-enter-active {
    transform: scale(1);
    transition: transform .2s ease-out
}

.mbuywin-scale-appear {
    transform: scale(.2)
}

.mbuywin-scale-appear.mbuywin-scale-appear-active {
    transform: scale(1);
    transition: transform .2s ease-out
}

.mbuywin-scale-leave {
    transform: scale(1)
}

.mbuywin-scale-leave.mbuywin-scale-leave-active {
    transform: scale(.2);
    transition: transform .2s ease-out
}

.buywin_wrap.buyts {
    width: 72%;
    min-width: 297px
}

.buywin_iner.buyts {
    padding: 16px;
    border-radius: 4px;
    text-align: center
}

.buywin_iner.buyts .buyts_top {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: -40px;
    transform: translate(-50%);
    width: 100px;
    height: 100px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2)
}

.buywin_iner.buyts .buyts_top:before {
    content: "VIP";
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    z-index: 2;
    left: 0;
    top: 0;
    width: 24px;
    height: 15px;
    font-size: 9px;
    color: #fff;
    padding-top: 1.5px;
    box-sizing: border-box;
    border-bottom-right-radius: 6px;
    background-color: red;
    background-image: linear-gradient(90deg, #fb5758, #ff8063)
}

.buywin_iner.buyts .buyts_top>img {
    width: 100%;
    height: 100%
}

.buywin_iner.buyts .buyts_title {
    font-weight: 700;
    text-align: center;
    padding-top: 80px;
    font-size: 17px;
    color: #333
}

.buywin_iner.buyts .buyts_tip {
    display: inline-block;
    padding: 0 10px;
    position: relative;
    text-align: center;
    margin-top: 15px;
    font-size: 13px;
    color: #666
}

.buywin_iner.buyts .buyts_tip:after,
.buywin_iner.buyts .buyts_tip:before {
    content: "";
    display: block;
    position: absolute;
    width: 30px;
    height: 1px;
    background-color: rgba(0, 0, 0, .1);
    top: 9px
}

.buywin_iner.buyts .buyts_tip:before {
    left: -30px
}

.buywin_iner.buyts .buyts_tip:after {
    right: -30px
}

.buywin_iner.buyts .buyts_icons {
    -ms-flex-align: center;
    align-items: center
}

.buywin_iner.buyts .buyts_icons,
.buywin_iner.buyts .buyts_icons .buyts_icon {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center
}

.buywin_iner.buyts .buyts_icons .buyts_icon {
    margin: 15px 20px 0;
    -ms-flex-direction: column;
    flex-direction: column
}

.buywin_iner.buyts .buyts_icons .buyts_icon>img {
    display: block;
    width: 45px;
    height: 45px
}

.buywin_iner.buyts .buyts_icons .buyts_icon>div {
    margin-top: 6px;
    font-size: 11px;
    color: #666;
    text-align: center
}

.buywin_iner.buyts .buywin_cont {
    margin-top: 22px
}

.buywin_iner.buyts .buywin_bottom {
    font-size: 17px;
    margin: 18px 16px 0;
    background-color: red;
    background-image: linear-gradient(90deg, #ff594a, #d33a31)
}

.m-homeft {
    position: relative;
    padding-top: 53.3%;
    margin-top: 4px;
    background: url(recommand_bg_2x.png) no-repeat;
    background-size: contain
}

.m-homeft .ftwrap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    z-index: 1;
    text-align: center
}

.m-homeft .logo {
    padding-top: 16.9%
}

.m-homeft .logosvg {
    display: block;
    margin: 0 auto;
    width: 230px;
    height: 44px
}

.m-homeft .openapp {
    line-height: 38px;
    border: 1px solid #d33a31;
    border-radius: 38px;
    font-size: 16px;
    color: #d33a31;
    margin: 15px 37px 5px
}

.m-homeft .copyright {
    color: #888;
    font-size: 12px;
    line-height: 16px;
    transform: scale(.75)
}

@media screen and (max-width:374px) {
    .m-homeft .logo {
        padding-top: 12%
    }
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-homeft {
        background-image: url(recommand_bg_3x.png)
    }
}

.m-hmhot .hotop {
    position: relative;
    padding-top: 38.9%;
    overflow: hidden;
    background: url(hot_music_bg_2x.jpg) no-repeat;
    background-size: contain
}

.m-hmhot .hotop:after {
    content: " ";
    z-index: 1;
    background-color: rgba(0, 0, 0, .2)
}

.m-hmhot .hotop:after,
.m-hmhot .hotopct {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.m-hmhot .hotopct {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    z-index: 2;
    padding-left: 20px;
    box-sizing: border-box
}

.m-hmhot .hoticon {
    width: 142px;
    height: 67px;
    background-position: -24px -30px
}

.m-hmhot .hottime {
    margin-top: 10px;
    color: hsla(0, 0%, 100%, .8);
    font-size: 12px;
    transform: scale(.91);
    transform-origin: left top
}

.m-hmhot .hotcont {
    position: relative
}

.m-hmhot .hotcont .u-spin {
    height: 200px
}

.m-hmhot .hotdn {
    height: 55px;
    line-height: 55px;
    text-align: center
}

.m-hmhot .hotview {
    display: inline-block;
    color: #999;
    padding-right: 14px;
    background: url() 100% no-repeat;
    background-size: 7px 12px
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-hmhot .hotop {
        background-image: url(hot_music_bg_3x.jpg)
    }
}

@media only screen and (device-width:375px) and (device-height:812px) {
    .m-hmhot {
        padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)
    }
}

.f-link {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent
}

.u-svg {
    display: inline-block;
    vertical-align: middle;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat
}

.u-svg-srch {
    width: 13px;
    height: 13px;
    background-image: url()
}

.u-svg-empty {
    width: 14px;
    height: 14px;
    background-image: url()
}

.u-svg-histy {
    width: 15px;
    height: 15px;
    background-image: url()
}

.u-svg-close {
    width: 12px;
    height: 12px;
    background-image: url()
}

.u-svg-search {
    width: 15px;
    height: 15px;
    background-image: url()
}

.u-svg-arr {
    width: 8px;
    height: 13px;
    background-image: url()
}

.m-hmsrch {
    background: #fbfcfd
}

.m-hmsrch .u-spin {
    position: relative;
    height: 200px
}

.m-input {
    padding: 15px 10px
}

.m-input:after {
    border-color: rgba(0, 0, 0, .1)
}

.m-input .inputcover {
    position: relative;
    width: 100%;
    height: 30px;
    padding: 0 30px;
    box-sizing: border-box;
    background: #ebecec;
    border-radius: 30px
}

.m-input .u-svg-srch {
    position: absolute;
    left: 0;
    top: 9px;
    margin: 0 8px;
    vertical-align: middle
}

.m-input .close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    line-height: 28px;
    text-align: center
}

.m-input .u-svg-empty {
    display: none;
    vertical-align: middle
}

.m-input .u-svg-empty.z-show {
    display: inline-block
}

.m-input .input {
    width: 100%;
    height: 30px;
    line-height: 18px;
    background: transparent;
    font-size: 14px;
    color: #333
}

.m-input .input::-webkit-input-placeholder {
    font-size: 14px;
    color: #c9c9c9
}

.m-input .input::-webkit-search-cancel-button {
    display: none
}

.m-input .holder {
    position: absolute;
    left: 30px;
    top: 5px;
    font-size: 14px;
    color: #c9c9c9;
    background: transparent;
    pointer-events: none
}

.m-hotlist {
    padding: 15px 10px 0
}

.m-hotlist .title {
    font-size: 12px;
    line-height: 12px;
    color: #666
}

.m-hotlist .list {
    margin: 10px 0 7px
}

.m-hotlist .item {
    display: inline-block;
    height: 32px;
    margin-right: 8px;
    margin-bottom: 8px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 32px;
    color: #333
}

.m-hotlist .item:after {
    border-color: #d3d4da;
    border-radius: 32px
}

.m-history .item,
.m-history .item .histyr {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 45px
}

.m-history .item .histyr {
    position: relative
}

.m-history .item .histyr:after {
    border-color: rgba(0, 0, 0, .1)
}

.m-history .item .histyr,
.m-history .item .link {
    -ms-flex: 1;
    flex: 1;
    width: 1%
}

.m-history .item .link {
    margin-right: 10px
}

.m-history .item .close {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    line-height: 32px
}

.m-history .u-svg-close {
    margin-left: 2px
}

.m-history .u-svg-histy {
    margin: 0 10px
}

.m-recom {
    margin: 0 auto
}

.m-recom .title {
    height: 50px;
    margin-left: 10px;
    padding-right: 10px;
    font-size: 15px;
    line-height: 50px;
    color: #507daf
}

.m-recom .title:after {
    border-color: rgba(0, 0, 0, .1)
}

.m-recom .recomitem {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 45px;
    padding-left: 10px
}

.m-recom i {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 7px
}

.m-recom span {
    display: inline-block;
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    padding-right: 10px;
    font-size: 15px;
    line-height: 45px;
    color: #333
}

.m-recom span:after {
    border-color: rgba(0, 0, 0, .1)
}

.m-searchresult {
    background: #fcfcfd
}

.m-srchwrong {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 55px;
    padding: 0 10px;
    line-height: 20px;
    font-size: 15px;
    color: #666
}

.m-srchwrong .txt {
    word-wrap: break-word;
    word-break: break-all
}

.m-srchwrong .hglight {
    color: #507daf
}

.m-srchwrong .hglight em {
    text-decoration: underline
}

.m-matchlist {
    padding: 8px 0 4px
}

.m-matchlist .title {
    margin-left: 10px;
    font-size: 12px;
    line-height: 16px;
    color: #666
}

.m-matchlist .matchitem {
    position: relative;
    height: 66px
}

.m-matchlist .linkcover {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 66px;
    margin-left: 10px;
    padding: 8px 10px 8px 0;
    box-sizing: border-box
}

.m-matchlist .describe {
    -ms-flex: 1;
    flex: 1;
    display: inline-block;
    width: 1%
}

.m-matchlist .piccover,
.m-matchlist .u-svg-arr {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: inline-block
}

.m-matchlist .piccover {
    position: relative;
    width: 50px;
    height: 50px;
    margin-right: 15px;
    line-height: 0
}

.m-matchlist .pic {
    display: block;
    width: 100%
}

.m-matchlist .u-svg-arr {
    margin-right: 8px;
    margin-left: 10px
}

.m-matchlist .describe .maindes {
    font-size: 17px;
    line-height: 30px;
    color: #333
}

.m-matchlist .describe .addtional {
    font-size: 12px;
    line-height: 15px;
    color: #999
}

.m-matchlist .album .piccover:after {
    content: "";
    position: absolute;
    top: 2px;
    right: -10px;
    width: 10px;
    height: 46px;
    background-repeat: no-repeat;
    background-size: 166px 97px;
    background-image: url(index_icon_2x.png);
    background-position: 0 -30px
}

.m-matchlist .mv .pic,
.m-matchlist .mv .piccover,
.m-matchlist .video .pic,
.m-matchlist .video .piccover {
    width: 89px;
    height: 50px
}

.m-matchlist .mv .piccover:after,
.m-matchlist .video .piccover:after {
    content: "";
    position: absolute;
    z-index: 3;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    transform: translate(-50%, -50%);
    background: url() 0 0/contain no-repeat
}

.m-noresult {
    padding: 20px 0;
    text-align: center
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-hotlist .item:after {
        border-radius: 60px
    }
    .m-matchlist .album .piccover:after {
        background-image: url(index_icon_3x.png)
    }
}

@media only screen and (device-width:375px) and (device-height:812px) {
    .m-hmsrch {
        padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)
    }
}

.u-scroll {
    line-height: 30px;
    color: #888;
    font-size: 14px;
    text-align: center
}

.u-scroll_load {
    padding-left: 30px;
    background: url() 0 no-repeat;
    background-size: 20px
}

.u-scroll_next {
    color: #507daf
}

.m-newsong,
.m-song {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 320px;
    overflow: hidden
}

.m-song-hide {
    display: none
}

.m-logo {
    position: absolute;
    top: 12px;
    left: 10px;
    display: block;
    height: 17px;
    line-height: 0
}

.m-song_nor {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60px;
    overflow: hidden;
    z-index: 21
}

.m-song_patsl {
    overflow: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch
}

.m-song_newfst {
    position: relative;
    padding-bottom: 12px;
    box-sizing: border-box
}

.m-song_move {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.m-song_othe {
    overflow: hidden
}

.m-song-scomt,
.m-song_com,
.m-song_othe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.m-song-scomt {
    width: 100%;
    z-index: 9
}

.m-song-notexit {
    height: 100%;
    background-color: #f1f2f3
}

.m-song-bg {
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    transform: scale(1.5);
    transform-origin: center top;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    overflow: hidden;
    z-index: -1;
    transition: opacity .3s linear
}

.m-song-bg:after {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .5)
}

.m-link {
    color: hsla(0, 0%, 100%, .6);
    height: 30px;
    line-height: 30px
}

.m-giude,
.m-link {
    position: absolute;
    left: 0;
    right: 0;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center
}

.m-giude {
    height: 36px;
    padding-top: 10px
}

.m-giude .arr {
    display: block;
    width: 17px;
    height: 12px;
    background-repeat: no-repeat;
    background-size: 17px auto;
    background-image: url();
    background-position: 0 0
}

.m-giude .arr.ani {
    animation: shining 1.2s steps(1) infinite
}

.m-giude.chgdir .arr {
    transform: rotate(180deg)
}

.m-giude .m-giude_text {
    color: hsla(0, 0%, 100%, .8);
    margin-top: 4px
}

@keyframes shining {
    0% {
        background-position: 0 0
    }
    15% {
        background-position: 0 -12px
    }
    30% {
        background-position: 0 -24px
    }
    45% {
        background-position: 0 -36px
    }
    60% {
        background-position: 0 -48px
    }
    75% {
        background-position: 0 -60px
    }
    90% {
        background-position: 0 -72px
    }
    to {
        background-position: 0 -84px
    }
}

.addtransition {
    transition: transform .5s ease-out
}

.pagetrans-up {
    transform: translateY(-100%)
}

.pagetrans-down {
    transform: translateY(100%)
}

.arowopy-enter {
    opacity: .2
}

.arowopy-enter.arowopy-enter-active {
    opacity: 1;
    transition: opacity .3s ease-in
}

.arowopy-appear {
    opacity: .2
}

.arowopy-appear.arowopy-appear-active {
    opacity: 1;
    transition: opacity .3s ease-in
}

.arowopy-leave {
    opacity: 1
}

.arowopy-leave.arowopy-leave-active {
    opacity: 0;
    transition: opacity .3s ease-out
}

@media screen and (orientation:landscape) {
    .m-song {
        min-height: 400px;
        overflow-x: hidden;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch
    }
    .m-song-bg {
        background-size: 100% auto
    }
    .m-song_nor {
        position: relative
    }
    .m-newsong .m-song_nor,
    .m-newsong .u-ft {
        position: absolute
    }
    .m-newsong .u-ft {
        margin-top: 0;
        padding-bottom: 0
    }
    .m-song_com {
        position: relative
    }
}

@media only screen and (device-width:375px) and (device-height:812px) {
    .m-song_nor {
        bottom: 94px
    }
    .m-newsong .u-ft,
    .m-song .u-ft {
        bottom: 44px
    }
    .m-newsong .m-paybox,
    .m-song .m-paybox {
        padding-bottom: 34px
    }
}

@media screen and (max-width:359px) and (max-height:500px) {
    .m-link {
        display: none
    }
}

@media screen and (min-width:360px) and (max-height:570px) {
    .m-link {
        display: none
    }
}

@media screen and (min-width:414px) and (max-height:618px) {
    .m-link {
        display: none
    }
}

.u-ft {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    z-index: 20
}

.u-ft.landinfo {
    bottom: 0;
    padding: 10px 0;
    background-image: linear-gradient(-180deg, transparent 9%, rgba(0, 0, 0, .5))
}

.u-ft-fixed {
    position: fixed;
    background-color: #fff;
    bottom: 0
}

.u-ft-fixed .footer-wrap {
    padding-top: 7px;
    padding-bottom: 7px
}

.u-ft-sgl .footer-wrap {
    padding-left: 30px;
    padding-right: 30px
}

.footer-ph {
    height: 56px
}

.footer-wrap {
    display: -ms-flexbox;
    display: flex;
    padding: 0 10px;
    margin: 0 auto
}

.footer-wrap .footer-tip {
    padding: 0 5px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 40px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    -ms-flex: 2;
    flex: 2
}

.footer-wrap .footer-tip .footer-tip-icon {
    margin-right: 5px;
    display: block;
    width: 15px;
    height: 17.5px;
    background: url() no-repeat;
    background-size: 100% 100%;
    width: 23px
}

.footer-wrap .footer-tip .footer-tip-inner,
.footer-wrap .footer-tip .footer-tip-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.footer-wrap .footer-tip .footer-tip-inner {
    display: -ms-flexbox;
    display: flex
}

.footer-wrap .footer-tip .footer-tip-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block
}

.footer-wrap .u-btn {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-left: 10px
}

.footer-wrap .u-btn:first-child {
    margin-left: 0
}

.footer-wrap .footer-btn {
    position: relative;
    height: 40px;
    line-height: 40px;
    font-size: 16px
}

.footer-wrap .footer-btn:before {
    content: "";
    display: inline-block;
    position: relative;
    top: 5px;
    width: 21px;
    height: 23px;
    background: url() no-repeat;
    background-size: contain;
    margin-right: 4px
}

@media screen and (max-width:320px) {
    .u-ft-sgl .footer-wrap {
        padding-left: 20px;
        padding-right: 20px
    }
}

@media screen and (orientation:landscape) {
    .u-ft {
        position: static;
        margin-top: 10px;
        padding-bottom: 10px
    }
    .u-ft-fixed {
        position: fixed;
        margin-top: 0;
        padding-bottom: 0
    }
}

@media only screen and (device-width:375px) and (device-height:812px) {
    .u-ft-fixed {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom)
    }
}

.u-btn {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 6px;
    border: 1px solid #adadad;
    border-radius: 40px;
    font-size: 18px;
    background-color: #fff;
    text-align: center;
    box-sizing: border-box
}

.u-btn-dis {
    opacity: .5
}

.u-btn-block {
    display: block;
    width: 100%
}

.u-btn-w120 {
    min-width: 120px
}

.u-btn-w100 {
    min-width: 100px
}

.u-btn-w80 {
    min-width: 80px
}

.u-btn-red {
    color: #fff;
    background-color: #d33a31;
    border-color: #d33a31
}

.u-btn-hollow {
    background-color: transparent
}

.u-btn-hollow.u-btn-red {
    color: #d33a31
}

.u-btn-circle {
    border-radius: 36px
}

.m-scroll_wrapper {
    overflow: hidden
}

.m-scroll_default {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%
}

.m-scroll_scroller {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: 1;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none
}

.m-scroll_scroller_horizontal {
    display: inline-block
}

.m-scroll_scroller_vertical {
    position: absolute;
    left: 0;
    top: 0;
    min-height: 100%;
    width: 100%
}

@keyframes circling {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

.a-circling {
    animation: circling 20s infinite linear
}

.a-circling.z-pause {
    animation-play-state: paused
}

.m-song-wrap {
    padding-top: 63px
}

.m-song-disc {
    position: relative;
    width: 248px;
    height: 248px;
    margin: 0 auto
}

.m-song-disc:after {
    content: " ";
    position: absolute;
    top: -63px;
    left: 107px;
    z-index: 5;
    width: 84px;
    height: 122px;
    background: url(needle.png) no-repeat;
    background-size: contain
}

.m-song-turn {
    width: 100%;
    height: 100%
}

.m-song-turn:before {
    content: " ";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    background: url(disc.png) no-repeat;
    background-size: contain
}

.m-song-lgour,
.m-song-light {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3
}

.m-song-light {
    background: url(disc_light.png) no-repeat;
    background-size: contain
}

.m-song-rollwrap {
    position: absolute;
    width: 150px;
    height: 150px;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: -75px 0 0 -75px
}

.m-song-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    background: url(disc_default.png) no-repeat;
    background-size: contain
}

.m-song-plybtn {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
    background: url() 0 0 no-repeat;
    background-size: contain
}

.m-song-plybtn:after {
    content: "";
    display: block;
    position: absolute
}

.m-song-clickarea {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 52px;
    z-index: 10
}

@media screen and (min-width:360px) {
    .m-song-wrap {
        padding-top: 70px
    }
    .m-song-disc {
        width: 296px;
        height: 296px
    }
    .m-song-disc:after {
        width: 96px;
        height: 137px;
        top: -70px;
        left: 133px;
        background-image: url(needle-ip6.png)
    }
    .m-song-turn:before {
        background-image: url(disc-ip6.png)
    }
    .m-song-light {
        background-image: url(disc_light-ip6.png)
    }
    .m-song-rollwrap {
        width: 184px;
        height: 184px;
        margin: -92px 0 0 -92px
    }
    .m-song-plybtn {
        width: 56px;
        height: 56px
    }
}

@media screen and (min-width:414px) {
    .m-song-wrap {
        padding-top: 80px
    }
    .m-song-disc {
        width: 342px;
        height: 342px
    }
    .m-song-disc:after {
        width: 110px;
        height: 157px;
        top: -80px;
        left: 150px;
        background-image: url(needle-plus.png)
    }
    .m-song-turn:before {
        background-image: url(disc-plus.png)
    }
    .m-song-light {
        background-image: url(disc_light-plus.png)
    }
    .m-song-rollwrap {
        width: 212px;
        height: 212px;
        margin: -106px 0 0 -106px
    }
    .m-song-plybtn {
        width: 65px;
        height: 65px;
        background-image: url(play_btn_3x.png)
    }
}

.m-song-info {
    padding: 0 35px;
    margin-top: 25px
}

.m-song-h2 {
    text-align: center;
    font-size: 15px;
    line-height: 1.1;
    color: #fefefe;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.m-song-gap {
    margin: 0 4px
}

.m-song-autr {
    font-size: 13px;
    color: hsla(0, 0%, 100%, .6)
}

.m-song-lrc {
    position: relative;
    margin-top: 14px
}

.m-song-lremp {
    font-size: 12px
}

.m-song-lremp,
.m-song-scroll {
    text-align: center;
    color: hsla(0, 0%, 100%, .6)
}

.m-song-scroll {
    line-height: 1.5;
    font-size: 13px;
    height: 72px;
    overflow: hidden
}

.m-song-lrtrans .m-song-lritem {
    padding-bottom: 4px
}

.m-song-iner {
    transition: transform .3s ease-out
}

.m-song-lritem {
    padding-bottom: 5px
}

.m-song-lrori {
    display: block;
    font-size: 14px;
    line-height: 1.2
}

.m-song-lrtra {
    display: block;
    min-height: 19px
}

.m-song-pure {
    font-size: 13px;
    color: hsla(0, 0%, 100%, .6);
    text-align: center;
    line-height: 1;
    padding-top: 6px;
    margin-bottom: 6px
}

.m-song-topzx {
    position: relative;
    z-index: 10
}

@media screen and (min-width:375px) {
    .m-song-lremp {
        font-size: 14px
    }
    .m-song-scroll {
        font-size: 16px
    }
    .m-song-lritem {
        padding-bottom: 8px
    }
    .m-song-lrtrans .m-song-lritem {
        padding-bottom: 6px
    }
    .m-song-lrori {
        font-size: 16px
    }
    .m-song-h2 {
        font-size: 18px
    }
    .m-song-autr,
    .m-song-pure {
        font-size: 16px
    }
}

@media screen and (min-width:414px) {
    .m-song-info {
        margin-top: 15px
    }
    .m-song-lrc {
        margin-top: 6px
    }
}

@media screen and (min-height:672px) {
    .m-song-info {
        margin-top: 25px
    }
    .m-song-lrc {
        margin-top: 14px
    }
}

@media screen and (max-height:540px) {
    .m-song-info {
        margin-top: 15px
    }
}

@media screen and (max-height:480px) {
    .m-song-info {
        margin-top: 10px
    }
    .m-song-lrc {
        margin-top: 6px
    }
}

.u-svg {
    display: inline-block;
    vertical-align: middle;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat
}

.u-svg-lglogo {
    width: 85px;
    height: 85px
}

.u-svg-otherlg {
    width: 41px;
    height: 41px
}

.u-svg-phone {
    width: 12px;
    height: 18px
}

.u-svg-password {
    width: 14px;
    height: 18px
}

.u-svg-email {
    width: 16px;
    height: 14px
}

.u-svg-authkey {
    height: 17px;
    width: 16px;
    height: 18px
}

.u-svg-payclose {
    width: 15px;
    height: 15px
}

.u-svg-zan {
    width: 12px;
    height: 12px
}

.u-svg-critic {
    width: 13px;
    height: 12px
}

.u-svg-played {
    width: 12px;
    height: 12px
}

.u-svg-playcount {
    width: 8px;
    height: 10px
}

.u-svg-duration {
    width: 12px;
    height: 12px
}

.u-svg-playvideo {
    width: 48px;
    height: 48px
}

.u-svg-playpgm {
    width: 24px;
    height: 24px
}

.u-svg-flradio {
    width: 17px;
    height: 17px
}

.u-svg-more {
    width: 5px;
    height: 9px
}

.u-svg-playvd {
    width: 46px;
    height: 46px
}

.u-svg-plus {
    width: 9px;
    height: 9px
}

.u-svg-fold,
.u-svg-unfold {
    width: 12px;
    height: 7px
}

.u-svg-orange,
.u-svg-white {
    width: 5px;
    height: 9px
}

.u-svg-logofans {
    width: 111px;
    height: 24px
}

.u-svg-songfans {
    width: 11px;
    height: 13px
}

.u-svg-logosong {
    width: 92px;
    height: 17px
}

.m-song_newcomm {
    position: relative;
    padding-top: 20px;
    min-height: 145px
}

.m-song_newcomm .m-comments-black {
    padding-top: 10px
}

.m-song_newcomm .m-comments-black .cmt_title {
    position: relative;
    padding: 0 0 0 10px;
    line-height: 25px;
    color: #fff;
    font-size: 16px;
    background-color: transparent
}

.m-song_newcomm .m-comments-black .cmt_title:after {
    content: "";
    display: block;
    width: 2px;
    height: 16px;
    position: absolute;
    top: 4px;
    left: 0;
    background: #d33a31
}

.m-song_newcomm .m-song_newcomtl {
    position: relative;
    padding: 0 0 0 10px;
    line-height: 25px;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    background-color: transparent
}

.m-song_newcomm .m-song_newcomtl:after {
    content: "";
    display: block;
    width: 2px;
    height: 16px;
    position: absolute;
    top: 4px;
    left: 0;
    background: #d33a31
}

.m-song-comment {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.m-song-comment .m-talk-imm {
    width: 100%;
    height: 100%
}

.m-song-cmload {
    background: url() top no-repeat;
    background-size: 20px;
    padding-top: 40px;
    text-align: center;
    color: #888
}

.m-song-cmemp {
    padding: 40px 0;
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 16px
}

.m-song-cmemt {
    color: #999
}

@media screen and (orientation:landscape) {
    .m-song-comment {
        position: static;
        height: 80%
    }
}

@media only screen and (device-width:375px) and (device-height:812px) {
    .m-song-comment .m-comments,
    .m-song_newcomm .m-comments {
        padding-left: constant(safe-area-inset-left);
        padding-right: constant(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right)
    }
}

.m-talk .m-comments .cmt_item .cmt_head {
    height: 35px
}

.m-talk .cmt_more_applink {
    padding-left: 10px;
    margin-bottom: 40px;
    padding-top: 19px
}

.m-talk .cmt_more_applink .box {
    display: block;
    border: 1px solid #d8d8d8;
    border-radius: 50px;
    padding: 10px 0;
    font-size: 14px;
    color: #fff;
    text-align: center;
    line-height: 1;
    background-color: rgba(0, 0, 0, .12);
    margin-right: 10px
}

.m-talk .cmt_more {
    margin-left: 50px
}

.m-talk .cmt_more .box {
    display: block;
    margin-right: 50px;
    padding: 18px 0;
    font-size: 14px;
    color: #999;
    text-align: center;
    line-height: 1
}

.m-talk .cmt_more i {
    position: relative;
    top: -1px;
    display: inline-block;
    width: 6px;
    height: 11px;
    margin-left: 5px;
    background: url() no-repeat;
    background-size: 100%;
    vertical-align: middle
}

.m-talk-imm .cmt_more:after {
    border-color: hsla(0, 0%, 100%, .1)
}

.m-song_newcomm_clip .m-comments:nth-last-child(2) .cmt_list .cmt_item:last-child {
    max-height: 65px;
    overflow: hidden
}

.m-song_newcomm_clip .m-comments:nth-last-child(2) .cmt_list .cmt_item:last-child .cmt_content,
.m-song_newcomm_clip .m-comments:nth-last-child(2) .cmt_list .cmt_item:last-child .cmt_replied {
    white-space: nowrap;
    text-overflow: clip;
    background: linear-gradient(180deg, #fff, transparent);
    -webkit-background-clip: text;
    color: transparent
}

.m-song_newcomm_clip .m-comments:nth-last-child(2) .cmt_list .cmt_item:last-child .cmt_content a {
    background: linear-gradient(180deg, #507daf, transparent);
    -webkit-background-clip: text;
    color: transparent
}

.m-comments .cmt_title {
    margin: 0;
    padding: 4px 10px;
    color: #666;
    font-size: 12px;
    font-weight: 400;
    background: rgba(0, 0, 0, .05)
}

.m-comments {
    word-wrap: break-word;
    word-break: break-all
}

.m-comments a {
    color: #507daf;
    text-decoration: none
}

.m-comments .cmt_item {
    padding-top: 10px;
    width: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row
}

.m-comments .cmt_item .cmt_head {
    margin: 0 10px;
    -ms-flex: none;
    flex: none
}

.m-comments .cmt_item .cmt_head img {
    display: block;
    border-radius: 50%;
    width: 30px;
    height: 30px
}

.m-comments .cmt_item .cmt_head+.cmt_wrap {
    padding-left: 0
}

.m-comments .cmt_item .cmt_wrap {
    padding-right: 10px;
    padding-bottom: 11px;
    padding-left: 10px;
    -ms-flex: auto;
    flex: auto;
    width: 0
}

.m-comments .cmt_item .cmt_wrap .cmt_header {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row
}

.m-comments .cmt_item .cmt_wrap .cmt_meta {
    -ms-flex: auto;
    flex: auto;
    width: 0;
    font-size: 0
}

.m-comments .cmt_item .cmt_wrap .cmt_user {
    max-width: 100%;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center
}

.m-comments .cmt_item .cmt_wrap .cmt_user a {
    font-size: 14px;
    color: #666;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -ms-flex: auto;
    flex: auto
}

.m-comments .cmt_item .cmt_wrap .cmt_user .vip {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: inline-block;
    margin: 0 5px
}

.m-comments .cmt_item .cmt_wrap .cmt_user .vip-associator {
    width: 21px;
    height: 11px;
    background: url("OeOahPin96CFyHmEnH2grA==_109951163446555771.png") 0 0/contain no-repeat
}

.m-comments .cmt_item .cmt_wrap .cmt_user .vip-package {
    width: 11px;
    height: 11px;
    background: url("uS0DQ8CxhOhmyiom4yLlJw==_109951163446550944.png") 0 0/contain no-repeat
}

.m-comments .cmt_item .cmt_wrap .cmt_user .vip-annualfee {
    width: 31px;
    height: 11px;
    background: url("y4OeNm5rXOfqWF4f8VuhUw==_109951163703946326.png") 0 0/contain no-repeat
}

.m-comments .cmt_item .cmt_wrap .cmt_time {
    font-size: 9px;
    color: #999
}

.m-comments .cmt_item .cmt_wrap .cmt_like {
    width: 65px;
    height: 22px;
    line-height: 22px;
    font-size: 11px;
    color: #999;
    -ms-flex: none;
    flex: none;
    text-align: right
}

.m-comments .cmt_item .cmt_wrap .cmt_like .cmt_likearea {
    display: inline-block;
    min-width: 30px;
    padding-left: 5px
}

.m-comments .cmt_item .cmt_wrap .cmt_like .cmt_count {
    vertical-align: middle
}

.m-comments .cmt_item .cmt_wrap .cmt_like .cmt_likeicn {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    line-height: 0;
    vertical-align: middle;
    cursor: pointer
}

.m-comments .cmt_item .cmt_wrap .cmt_like.active {
    color: #d33a32
}

.m-comments .cmt_item .cmt_wrap .cmt_content {
    position: relative;
    color: #333;
    font-size: 15px;
    line-height: 22px;
    margin-top: 5px
}

.m-comments .cmt_item .cmt_wrap .cmt_bubble {
    margin-top: 12px;
    padding-bottom: 22px
}

.m-comments .cmt_item .cmt_wrap .cmt_bubble-101:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 20px;
    background: url(TymxBylIIBSwCqJm-ZqElg==_109951163720644664.jpg);
    background-size: cover;
    left: -15px;
    top: -12px
}

.m-comments .cmt_item .cmt_wrap .cmt_bubble-101:after {
    position: absolute;
    content: "";
    width: 99px;
    height: 38px;
    background: url(mgofI7K9LHBn3Wz7r7p8LQ==/109951163720638828.png);
    background-size: cover;
    right: 0;
    bottom: 0
}

.m-comments .cmt_item .cmt_wrap .cmt_bubble-102:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 20px;
    background: url(T7xd4Cj1s736OR6v2mSNug==_109951163720647047.png);
    background-size: cover;
    left: -15px;
    top: -12px
}

.m-comments .cmt_item .cmt_wrap .cmt_bubble-102:after {
    position: absolute;
    content: "";
    width: 99px;
    height: 38px;
    background: url(vazPjT0LxzeRhbkHmhhJyg==_109951163720635451.png);
    background-size: cover;
    right: 0;
    bottom: 0
}

.m-comments .cmt_item .cmt_wrap .cmt_bubble-103:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 20px;
    background: url(VFQCEVogC8xPNVHWFOjMGA==_109951163720650556.png);
    background-size: cover;
    left: -15px;
    top: -12px
}

.m-comments .cmt_item .cmt_wrap .cmt_bubble-103:after {
    position: absolute;
    content: "";
    width: 99px;
    height: 38px;
    background: url(k_qpdCRHESbtEYFF8S8gsA==_109951163720647630.png);
    background-size: cover;
    right: 0;
    bottom: 0
}

.m-comments .cmt_item .cmt_wrap .cmt_bubble-104:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 20px;
    background: url(HJZBxb1KCSOJ_KwrTeTmXw==_109951163720650142.png);
    background-size: cover;
    left: -15px;
    top: -12px
}

.m-comments .cmt_item .cmt_wrap .cmt_bubble-104:after {
    position: absolute;
    content: "";
    width: 99px;
    height: 38px;
    background: url(5H-SFx2bnhY9gcMRLLew1g==_109951163720647190.png);
    background-size: cover;
    right: 0;
    bottom: 0
}

.m-comments .cmt_item .cmt_wrap .cmt_bubble-105:before {
    position: absolute;
    content: "";
    width: 15px;
    height: 20px;
    background: url(nYsiBIIAuRI40jEPdE7Q5A==_109951163720648213.png);
    background-size: cover;
    left: -15px;
    top: -12px
}

.m-comments .cmt_item .cmt_wrap .cmt_bubble-105:after {
    position: absolute;
    content: "";
    width: 99px;
    height: 38px;
    background: url(OLccP-51DHcwMZlrMGHsYg==_109951163720649172.png);
    background-size: cover;
    right: 0;
    bottom: 0
}

.m-comments .cmt_item .cmt_wrap .cmt_replied {
    margin: 5px 0;
    padding: 10px;
    color: #888;
    font-size: 14px;
    line-height: 21px
}

.m-comments .cmt_item .cmt_wrap .cmt_replied .cmt_replied_user {
    vertical-align: middle
}

.m-comments .cmt_item .cmt_wrap .cmt_replied .cmt_emoji {
    margin-top: -2px
}

.m-comments .cmt_item .cmt_wrap .cmt_emoji,
.m-comments .cmt_item .cmt_wrap .cmt_express_noparse,
.m-comments .cmt_item .cmt_wrap .cmt_text {
    vertical-align: middle
}

.m-comments .cmt_item:last-child .cmt_wrap:after {
    border-bottom: none
}

.m-comments .cmt_holder {
    padding: 50px 10px;
    text-align: center;
    font-size: 12px;
    color: #999
}

.m-comments .cmt_express {
    width: 70px;
    height: 70px;
    margin-top: 3px
}

.m-comments .cmt_express_img {
    display: inline-block;
    width: 100%;
    height: 100%
}

.m-comments-black .cmt_title {
    color: #ccc
}

.m-comments-black .cmt_item .cmt_wrap:after {
    border-color: hsla(0, 0%, 100%, .1)
}

.m-comments-black .cmt_item .cmt_wrap .cmt_header .cmt_user a {
    color: hsla(0, 0%, 100%, .7)
}

.m-comments-black .cmt_item .cmt_wrap .cmt_header .cmt_time {
    color: hsla(0, 0%, 100%, .3)
}

.m-comments-black .cmt_item .cmt_wrap .cmt_content {
    color: #fff
}

.m-comments-black .cmt_item .cmt_wrap .cmt_replied {
    color: hsla(0, 0%, 100%, .6);
    background-color: hsla(0, 0%, 100%, .05)
}

.m-comments-black .cmt_item .cmt_wrap .cmt_replied:after {
    border-color: hsla(0, 0%, 100%, .1)
}

.m-comments .cmt_head>a {
    position: relative;
    display: block
}

.m-comments .cmt_head>a .ava-icon {
    position: absolute;
    right: -5px;
    bottom: 0;
    width: 12px;
    height: 12px;
    background-image: url("l0FkWHfIqLav4I1oYHIyVQ==_19013854579518977.jpg");
    background-repeat: no-repeat;
    background-size: 75px auto
}

.m-comments .cmt_head>a .ava-icon.ava-icon-yyr {
    background-position: -20px 0
}

.m-comments .cmt_head>a .ava-icon.ava-icon-v {
    background-position: 0 0
}

.m-comments .cmt_head>a .ava-icon.ava-icon-daren {
    background-position: -40px 0
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-comments .cmt_head .ava-icon {
        background-image: url("Zcn0QRV2Aa7vBLJsqbs6jg==_18908301463251733.png");
        background-size: 70px auto
    }
    .m-comments .cmt_item .cmt_wrap .cmt_user .vip-associator {
        background: url("hLQ07HbOaNHjc4CuEklRew==_109951163446556730.png") 0 0/contain no-repeat
    }
    .m-comments .cmt_item .cmt_wrap .cmt_user .vip-package {
        background: url("9-akeoJ6i9PvsRGoBqfWcw==_109951163446558153.png") 0 0/contain no-repeat
    }
}

.m-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 1000;
    transform: translate(-50%, -50%);
    min-width: 70px;
    min-height: 30px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .8);
    transition: all .2s linear
}

.m-toast,
.m-toast.toast-entering {
    opacity: 0
}

.m-toast.toast-entered,
.m-toast.toast-exiting {
    opacity: 1
}

.m-toast.toast-exited {
    opacity: 0
}

.m-toast .text {
    line-height: 30px;
    font-size: 15px;
    color: #fff
}

.m-toast-center {
    margin-top: -100px;
    width: 180px;
    min-height: 116px;
    border-radius: 6px
}

.m-toast-center .icn {
    display: inline-block;
    width: 35px;
    height: 35px;
    margin: 25px 0 6px
}

.m-toast-center .text {
    line-height: 20px;
    padding: 0 15px 10px
}

.m-toast-top {
    top: 15px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 70px;
    height: 30px;
    padding: 0 15px;
    border-radius: 15px;
    background: rgba(0, 0, 0, .6)
}

.m-toast-top,
.m-toast-top .text {
    line-height: 30px
}

.m-toast-top .icn {
    display: none;
    margin: 0
}

.m-toast-top.toast-entering {
    transform: translate(-50%, -100%);
    opacity: .5
}

.m-toast-top.toast-entered {
    transform: translate(-50%);
    opacity: 1
}

.m-toast-top.toast-exiting {
    transform: translate(-50%);
    opacity: .5
}

.m-toast-top.toast-exited {
    transform: translate(-50%, -100%);
    opacity: .01
}

.m-toast-loading {
    margin-top: -100px;
    width: 180px;
    min-height: 116px;
    border-radius: 6px
}

.m-toast-loading .icn {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 27px 0 6px;
    background: url("C9tJEnwLhYm4dvTdsukD0g==_19106213556354168.png") no-repeat;
    background-size: 30px 240px;
    background-position: 0 0;
    animation: toastload .72s infinite step-start
}

.m-toast-loading .text {
    line-height: 20px;
    padding: 0 15px 10px
}

@keyframes toastload {
    0% {
        background-position-y: 0
    }
    14.28% {
        background-position-y: -30px
    }
    28.56% {
        background-position-y: -60px
    }
    42.84% {
        background-position-y: -90px
    }
    57.12% {
        background-position-y: -120px
    }
    71.4% {
        background-position-y: -150px
    }
    85.68% {
        background-position-y: -180px
    }
    to {
        background-position-y: -210px
    }
}

.m-moreLists {
    margin-top: 40px;
    padding-bottom: 30px;
    line-height: 1.6
}

.m-moreLists .u-title {
    position: relative;
    padding-left: 10px;
    line-height: 18px;
    color: #fff;
    font-size: 16px
}

.m-moreLists .u-title:after {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: 0;
    width: 2px;
    height: 16px;
    background: #d33a31
}

.m-moreLists ul {
    margin-top: 12px;
    display: -ms-flexbox;
    display: flex
}

.m-moreLists li {
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    margin-left: 3px
}

.m-moreLists li:first-child {
    margin-left: 0
}

.m-moreLists li img {
    display: block;
    width: 100%
}

.m-moreLists .cover {
    position: relative;
    padding-bottom: 100%;
    overflow: hidden
}

.m-moreLists .cover>img {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1
}

.m-moreLists .sgply_cut {
    position: absolute;
    right: 5px;
    top: 2px;
    z-index: 3;
    padding-left: 13px;
    color: #fff;
    font-size: 12px;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 11px 10px
}

.m-moreLists .tit {
    margin: 2px 0 -1px;
    padding: 0 6px;
    color: #fff;
    font-size: 13px
}

.m-moreLists .sub {
    position: relative;
    padding: 0 19px 0 6px;
    color: hsla(0, 0%, 100%, .6);
    font-size: 12px;
    height: 20px;
    overflow: hidden
}

.m-moreLists .author {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    position: relative;
    float: left
}

.m-moreLists .icn {
    position: absolute;
    top: 5px;
    right: -13px
}

.m-moreLists .icn.u-tag-daren {
    top: 4px
}

@media only screen and (device-width:375px) and (device-height:812px) {
    .m-moreLists {
        padding-left: constant(safe-area-inset-left);
        padding-right: constant(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right)
    }
}

.u-tag {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: url() no-repeat;
    background-size: 30px auto
}

.u-tag-vip {
    background-position: 0 0
}

.u-tag-daren {
    background-position: -15px 0
}

.u-tag-musician {
    background-position: 0 -15px
}

@media screen (-webkit-min-device-pixel-ratio:3) {
    .u-tag {
        background-image: url(name_tag_3x.png)
    }
}

.f-vc {
    position: absolute !important;
    top: 50%;
    transform: translateY(-50%)
}

.m-moreSongs {
    margin-top: 10px;
    padding-bottom: 30px;
    line-height: 1.6
}

.m-moreSongs .u-title {
    position: relative;
    padding-left: 10px;
    line-height: 18px;
    color: #fff;
    font-size: 16px
}

.m-moreSongs .u-title:after {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: 0;
    width: 2px;
    height: 16px;
    background: #d33a31
}

.m-card {
    margin-top: 10px
}

.m-card .cover {
    float: left;
    margin-right: 10px
}

.m-card .tag {
    margin-right: 5px
}

.m-card .cnt h3 .tag {
    position: relative;
    top: -1px
}

.m-card .itm {
    position: relative;
    overflow: hidden
}

.m-card .cnt {
    height: 100%
}

.m-card .cnt h3 {
    line-height: 18px;
    font-size: 15px;
    color: #fff
}

.m-card .cnt p.sub {
    margin-top: 2px;
    color: hsla(0, 0%, 100%, .6)
}

.m-card .cnt:after {
    border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}

.m-card-sml .cover {
    width: 40px;
    height: 40px
}

.m-card-sml .u-cover-alb50 {
    margin-right: 20px
}

.m-card-sml .itm {
    padding: 7px 0 0 10px;
    height: 40px
}

.m-card-sml .play {
    position: absolute;
    right: 15px;
    width: 24px;
    height: 24px;
    color: hsla(0, 0%, 100%, .5)
}

.m-card-sml .play svg {
    fill: currentColor
}

.m-card-sml .arr {
    right: 19px;
    width: 8px;
    height: 14px
}

.m-card-sml.m-card-list .cnt {
    padding-bottom: 7px;
    padding-right: 40px
}

.m-card-sml.m-card-list .itm {
    padding-bottom: 7px
}

.m-card-sml .itm.z-hasright {
    padding-right: 50px
}

@media only screen and (device-width:375px) and (device-height:812px) {
    .m-moreSongs {
        padding-left: constant(safe-area-inset-left);
        padding-right: constant(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right)
    }
}

.m-notexit {
    padding: 20px 0 17px;
    text-align: center
}

.m-notexit-h3 {
    font-size: 16px
}

.m-notexit-p {
    margin-top: 8px;
    font-size: 12px;
    color: #999
}

.m-topdown {
    display: -ms-flexbox;
    display: flex;
    height: 61px;
    padding: 10px 20px;
    box-sizing: border-box;
    background: #e4e6e8;
    overflow: hidden;
    line-height: 1.2
}

.m-topdown-fl {
    width: 41px;
    min-width: 41px;
    height: 41px;
    background: url() no-repeat;
    background-size: contain
}

.m-topdown-fc {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100%;
    margin: 0 10px
}

.m-topdown-h1 {
    font-size: 20px
}

.m-topdown-p {
    font-size: 12px;
    color: #666;
    margin-top: 4px
}

.m-topdown-fr {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.m-topdown-btn {
    display: inline-block;
    width: 44px;
    height: 19px;
    border-radius: 2px;
    border: 1px solid #4688ca;
    text-align: center;
    line-height: 20px;
    color: #3681c8;
    font-size: 12px
}

.m-attract {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 12px;
    background-color: rgba(0, 0, 0, .3);
    z-index: 22
}

.m-attract_logo {
    -ms-flex: 1;
    flex: 1;
    width: 1%
}

.m-attract_fans {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    color: #fff;
    line-height: 18px
}

.m-attract_text {
    display: inline-block;
    vertical-align: baseline;
    margin-left: 5px;
    margin-right: 8px
}

.m-attract .u-svg-songfans {
    margin-top: -2px
}

.m-attract .u-svg-white {
    opacity: .5;
    vertical-align: baseline
}

.m-loginpage {
    position: relative;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: url(bg@2x.png) 0 0/cover no-repeat;
    background-color: #f6f6f6
}

.m-loginpage .content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    margin-bottom: 150px
}

.m-loginpage .logo {
    width: 100%;
    height: 0;
    padding-top: 60%;
    background: url(newlogo@2x.png) no-repeat;
    background-position: bottom;
    background-size: contain;
    background-origin: border-box
}

.m-loginpage .btnbox {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 10px
}

.m-loginpage .btnbox .u-btn-login {
    display: block;
    width: 296px;
    height: 42px;
    margin-bottom: 15px;
    line-height: 42px;
    border-radius: 40px
}

.m-login_tip {
    background: url() 0 no-repeat;
    background-size: 14px;
    margin: 0 16px -30px;
    padding-left: 20px;
    color: #d43b32;
    font-size: 12px;
    line-height: 30px
}

.m-login_opts {
    display: -ms-flexbox;
    display: flex;
    margin: 30px 0 20px;
    padding: 0 16px
}

.m-login-auth .u-btn-login2,
.m-login .u-btn-login2,
.m-loginick .u-btn-login2,
.m-register .u-btn-login2 {
    display: block;
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    font-size: 17px
}

.m-login-auth .u-btn-login2:last-child,
.m-login .u-btn-login2:last-child,
.m-loginick .u-btn-login2:last-child,
.m-register .u-btn-login2:last-child {
    margin-left: 10px
}

.m-login-auth .u-btn-login2:first-child,
.m-login .u-btn-login2:first-child,
.m-loginick .u-btn-login2:first-child,
.m-register .u-btn-login2:first-child {
    margin-left: 0
}

.m-login_spin {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-color: rgba(0, 0, 0, .4)
}

.m-login_scap {
    padding: 0 16px;
    margin-top: 30px;
    text-align: center
}

.m-othermd {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 125px;
    box-sizing: border-box
}

.m-othermd .title {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    padding: 0 5px;
    color: #999;
    font-size: 13px
}

.m-othermd .title .line {
    -ms-flex: 1;
    flex: 1;
    display: block;
    width: 138px;
    height: 1px
}

.m-othermd .title .line.z-left {
    background-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .1))
}

.m-othermd .title .line.z-right {
    background-image: linear-gradient(270deg, transparent 0, rgba(0, 0, 0, .1))
}

.m-othermd .title .tt {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 90px;
    text-align: center
}

.m-othermd .otherlist {
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 16px 39px 0
}

.m-othermd .otherlist,
.m-othermd .otherlist .item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.m-othermd .otherlist .item {
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 50px;
    color: #999;
    font-size: 12px;
    line-height: 17px
}

.m-othermd .otherlist .u-svg {
    display: block
}

.m-othermd .otherlist .name {
    display: block;
    margin-top: 8px
}

@media only screen and (device-height:812px) and (device-width:375px) {
    .m-othermd {
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom)
    }
}

.m-login {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    overflow-x: hidden;
    background-color: #fbfcfd
}

.m-login .inputlist {
    padding-top: 12px;
    width: 100%
}

.m-login .m-login_more {
    text-align: center
}

.m-login .reset {
    display: inline-block;
    padding: 6px 1px 3px;
    color: #999;
    font-size: 14px;
    line-height: 16px;
    border-bottom: 1px solid #999
}

.inputcover {
    padding: 0 16px
}

.inputcover,
.m-input-login {
    width: 100%;
    box-sizing: border-box
}

.m-input-login {
    height: 43px;
    line-height: 43px;
    display: -ms-flexbox;
    display: flex
}

.m-input-login:after {
    border-color: rgba(0, 0, 0, .3)
}

.m-input-login .icon {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 18px;
    margin: 0 10px 0 3px;
    text-align: center
}

.m-input-login .inputbox {
    display: -ms-flexbox;
    display: flex;
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    color: #333;
    font-size: 17px
}

.m-input-login .inputbox .input {
    display: block;
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    color: #333;
    font-size: 17px
}

.m-input-login .inputbox .input::-webkit-input-placeholder {
    color: #ccc
}

.m-input-login .inputbox .input::-webkit-search-cancel-button {
    display: none
}

.m-input-login .inputbox .pre {
    display: block;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-right: 10px
}

.u-imgauth {
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding: 0 16px;
    box-sizing: border-box
}

.u-imgauth .m-input-login {
    -ms-flex: 1;
    flex: 1;
    width: 1%
}

.u-imgauth .imgauth_auth {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
    align-items: flex-end;
    width: 88px;
    overflow: hidden;
    margin-left: 10px
}

.u-imgauth .imgauth_img {
    display: block;
    width: 88px;
    height: 30px
}

.m-loginick {
    padding-top: 28px;
    overflow-x: hidden
}

.m-loginick .nick_desc {
    background: url(nick_bg.png) top no-repeat;
    background-size: 280px 85px;
    padding-top: 95px;
    margin-bottom: 40px;
    color: #999;
    text-align: center
}

.m-loginick .nick_scap {
    padding: 0 16px;
    margin-top: 50px;
    text-align: center
}

.m-register {
    position: relative;
    width: 100%;
    min-height: 100%;
    box-sizing: border-box;
    background-color: #fbfcfd
}

.m-register .inputlist {
    padding-top: 12px;
    width: 100%
}

.m-login-auth {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background-color: #fbfcfd
}

.m-login-auth .message {
    width: 100%;
    padding: 20px 17px 8px;
    box-sizing: border-box;
    color: #999;
    font-size: 14px;
    line-height: 16px
}

.m-login-auth .inputlist {
    margin-top: 12px;
    width: 100%;
    position: relative
}

.m-login-auth .m-input-login {
    padding-right: 70px
}

.m-login-auth .countdown {
    position: absolute;
    right: 16px;
    top: 12px;
    line-height: 20px;
    color: #328ad4
}

.m-login-auth .countdown.z-dis {
    color: #999
}

.m-song_tiktok .m-song-bg {
    background-color: #161824
}

.m-song_tiktok .m-song_nor {
    bottom: 0
}

.m-song_tiktok .m-giude {
    bottom: 60px !important
}

.m-song_tiktok .m-song_newfst {
    min-height: 100vh
}

.m-song_tip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    text-align: center;
    font-size: 12px;
    color: #fff;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.m-song_tip .m-song_icon {
    display: inline-block;
    margin-right: 5px;
    width: 16px;
    height: 16px;
    background: url("ynsOQWHq49mRJHiCggqJOw==_109951163545176112.png");
    background-size: 100% 100%
}

@media screen and (max-height:340px) {
    .m-song_tiktok .m-giude {
        bottom: 15px !important
    }
    .m-song_tiktok .m-song_tip {
        bottom: 5px
    }
}

@media screen and (max-height:570px) {
    .m-song_tiktok .m-giude {
        bottom: 20px !important
    }
    .m-song_tiktok .m-song_tip {
        bottom: 10px
    }
}

.m-newsong-uni .m-song_newfst {
    padding-bottom: 20px
}

.m-newsong-uni .m-song-clickarea {
    bottom: 20px
}

.song_tipph {
    bottom: -9999px
}

.song_tip,
.song_tipph {
    position: absolute;
    left: 0;
    width: 100%;
    z-index: 21
}

.song_tip {
    top: 0;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    font-size: 13px;
    color: #fff;
    background-color: hsla(0, 0%, 8%, .5);
    line-height: 17px
}

.song_tip_fl {
    -ms-flex: 1;
    flex: 1;
    width: 1%
}

.song_tip_fr {
    width: 50px;
    text-align: right;
    opacity: .6
}

.song_tip_em {
    color: #d33a31
}

.song_tip_svg {
    width: 7px;
    height: 11px;
    margin-left: 4px
}

.m-playlist {
    background-color: #f8f8f8;
    min-height: 100%
}

.pylst_more {
    position: relative;
    min-height: 50px
}

.u-songs .u-song:last-child .sgi_fr:after {
    display: none
}

.u-song {
    display: -ms-flexbox;
    display: flex
}

.u-song.z-dis,
.u-song.z-dis .sgi_fl,
.u-song.z-dis .sgich_info {
    color: #ccc
}

.u-song.z-dis .sgich_ply {
    opacity: .3
}

.u-song .sgi_fl {
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 40px;
    font-size: 17px;
    color: #999
}

.u-song .sgi_fl,
.u-song .sgi_fr {
    display: -ms-flexbox;
    display: flex
}

.u-song .sgi_fr {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    position: relative
}

.u-song .sgich_fl {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 6px 0;
    width: 0
}

.u-song .sgich_tl {
    font-size: 17px
}

.u-song .sgich_info {
    font-size: 12px;
    color: #888
}

.u-song .sgich_fr {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px
}

.u-song .sgich_ply {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-position: -24px 0
}

.u-song .migu {
    display: inline-block;
    width: 15px;
    height: 12px;
    margin: 1px 4px 0 0;
    opacity: .7;
    background: url() no-repeat;
    background-size: 15px auto
}

.pylst_header .lsthd_fl {
    position: relative
}

.pylst_header .lsthd_fl:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 18px;
    z-index: 2;
    background-image: linear-gradient(90deg, transparent, rgba(0, 0, 0, .2))
}

.pylst_header .lsthd_icon {
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 0;
    padding: 0 8px;
    height: 17px;
    color: #fff;
    font-size: 9px;
    text-align: center;
    line-height: 17px;
    background-color: rgba(217, 48, 48, .8);
    border-top-right-radius: 17px;
    border-bottom-right-radius: 17px
}

.pylst_header .lsthd_num {
    position: absolute;
    right: 2px;
    top: 0;
    z-index: 3;
    padding-left: 15px;
    color: #fff;
    font-size: 12px;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 11px 10px;
    text-shadow: 1px 0 0 rgba(0, 0, 0, .15)
}

.pylst_header .lsthd_title {
    padding-top: 1px;
    font-size: 17px;
    line-height: 1.3;
    color: #fefefe;
    height: 44px;
    display: -webkit-box;
    -webkit-box-pack: center
}

.pylst_header .lsthd_auth {
    display: block;
    position: relative;
    margin-top: 20px
}

.pylst_header .lsthd_link {
    display: inline-block;
    color: hsla(0, 0%, 100%, .7)
}

.pylst_header .lsthd_ava {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px
}

.u-avatar {
    position: relative;
    width: 100%
}

.u-avatar>.u-img {
    border-radius: 50%
}

.u-avatar .ava-icon {
    position: absolute;
    right: -5px;
    bottom: 0;
    width: 12px;
    height: 12px;
    background-image: url(usericn_2x.png);
    background-repeat: no-repeat;
    background-size: 75px auto
}

.u-avatar .ava-icon.ava-icon-yyr {
    background-position: -20px 0
}

.u-avatar .ava-icon.ava-icon-v {
    background-position: 0 0
}

.u-avatar .ava-icon.ava-icon-daren {
    background-position: -40px 0
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .u-avatar .ava-icon {
        background-image: url(usericn_3x.png);
        background-size: 70px auto
    }
}

.u-plhead {
    position: relative;
    padding: 30px 10px 30px 15px;
    overflow: hidden
}

.u-plhead .plhead_bg {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    filter: blur(20px);
    transform: scale(1.5)
}

.u-plhead .plhead_bg,
.u-plhead .plhead_bg:after {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1
}

.u-plhead .plhead_bg:after {
    content: " ";
    background-color: rgba(0, 0, 0, .25)
}

.u-plhead .plhead_wrap {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    z-index: 2
}

.u-plhead .plhead_fl {
    position: relative;
    width: 114px;
    height: 114px;
    background-color: #e2e2e3
}

.u-plhead .plhead_fr {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    margin-left: 16px
}

@media screen and (min-width:360px) {
    .u-plhead .plhead_fl {
        width: 126px;
        height: 126px
    }
}

@media screen and (min-width:414px) {
    .u-plhead .plhead_fl {
        width: 145px;
        height: 145px
    }
}

@media screen and (min-width:768px) {
    .u-plhead .plhead_fl {
        width: 200px;
        height: 200px
    }
}

.pylst_intro {
    position: relative;
    margin: 0 10px 0 15px;
    padding-top: 10px;
    line-height: 19px;
    color: #666
}

.lstit_tags {
    margin-bottom: 10px;
    line-height: 20px;
    margin-right: -10px
}

.lstit_tag {
    display: inline-block;
    margin-right: 10px;
    padding: 1px 8px;
    font-size: 12px
}

.lstit_tag:after {
    border-radius: 9999px
}

.u-intro {
    position: relative;
    padding-bottom: 18px;
    line-height: 19px;
    color: #666
}

.u-intro .intro_arrow {
    position: absolute;
    bottom: 3px;
    right: 0;
    z-index: 3;
    width: 15px;
    height: 15px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: 12px auto
}

.plylist_tip {
    position: fixed;
    left: 0;
    width: 100%;
    bottom: 54px;
    z-index: 21;
    box-sizing: border-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 10px;
    font-size: 13px;
    color: #333;
    background-color: #fff;
    line-height: 17px
}

.plylist_tip_fl {
    -ms-flex: 1;
    flex: 1;
    width: 1%
}

.plylist_tip_fr {
    width: 50px;
    text-align: right;
    color: #888
}

.plylist_tip_em {
    color: #d33a31
}

.plylist_tip_svg {
    width: 7px;
    height: 11px;
    margin-left: 4px
}

.m-album {
    background-color: #f8f8f8;
    min-height: 100%
}

.m-album .album_intro {
    padding: 10px 10px 0 15px
}

.album_header .amhed_flbg {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    height: 114px;
    padding-left: 115%;
    background: url(album@2x.png) 100% no-repeat;
    background-size: contain
}

.album_header .amhed_img {
    position: relative;
    z-index: 2
}

.album_header .amhed_icon {
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 0;
    padding: 0 8px;
    height: 17px;
    color: #fff;
    font-size: 9px;
    text-align: center;
    line-height: 17px;
    background-color: rgba(217, 48, 48, .8);
    border-top-right-radius: 17px;
    border-bottom-right-radius: 17px
}

.album_header .amhed_fr {
    margin-left: 26px;
    color: hsla(0, 0%, 100%, .5)
}

.album_header .amhed_tl {
    padding-top: 10px;
    font-size: 17px;
    line-height: 1.3;
    color: #fefefe
}

.album_header .amhed_cnt {
    margin-top: 22px
}

.album_header .amhed_singer,
.album_header .amhed_singer a,
.album_header .amhed_singer a:visited {
    color: #fff
}

.album_header .amhed_time {
    margin-top: 5px;
    font-size: 12px
}

@media screen and (min-width:360px) {
    .album_header .amhed_flbg {
        height: 126px
    }
    .album_header .amhed_fr {
        margin-left: 29px
    }
}

@media screen and (min-width:414px) {
    .album_header .amhed_flbg {
        height: 145px
    }
    .album_header .amhed_fr {
        margin-left: 35px
    }
}

@media screen and (min-width:768px) {
    .album_header .amhed_flbg {
        height: 200px
    }
    .album_header .amhed_fr {
        margin-left: 50px
    }
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .album_header .amhed_flbg {
        background-image: url(album@3x.png)
    }
}

.user-header {
    position: relative;
    width: 100%;
    padding-bottom: 64.49%;
    line-height: 1.2
}

.user-header .usrhd_wrap {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-position: 50%;
    background-size: cover
}

.user-header .usrhd_wrap:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: url() repeat-x;
    background-size: contain
}

.user-header .usrhd_in {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 2;
    width: 100%;
    transform: translateY(-50%)
}

.user-header .usrhd_top {
    display: -ms-flexbox;
    display: flex
}

.user-header .usrhd_num {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    height: 80px;
    padding-top: 20px;
    text-align: center;
    box-sizing: border-box
}

.user-header .usrhd_tfl {
    padding-right: 2%
}

.user-header .usrhd_tfr {
    padding-left: 2%
}

.user-header .usrhd_t1 {
    font-size: 17px;
    color: #fff;
    min-height: 20px
}

.user-header .usrhd_t2 {
    margin-top: 1px;
    font-size: 12px;
    color: hsla(0, 0%, 100%, .6)
}

.user-header .usrhd_avatar {
    width: 80px;
    height: 80px;
    position: relative
}

.user-header .usrhd_avatar .u-img {
    border-radius: 50%
}

.user-header .usrhd_svg {
    position: absolute;
    bottom: 0;
    right: 2px;
    width: 21px;
    height: 21px;
    fill: currentColor
}

.user-header .usrhd_info {
    width: 100%;
    padding: 0 9.7%;
    box-sizing: border-box
}

.user-header .usrhd_name {
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    text-align: center;
    margin-top: 9px;
    font-size: 17px;
    color: #fff;
    overflow: hidden
}

.user-header .usrhd_icns,
.user-header .usrhd_name {
    display: -ms-flexbox;
    display: flex;
    align-items: center
}

.user-header .usrhd_icns {
    -ms-flex: none;
    flex: none;
    -ms-flex-align: center;
    padding-right: 1px
}

.user-header .usrhd_icn {
    margin-left: 5px;
    width: 18px;
    height: 18px
}

.user-header .usrhd_sub {
    margin-top: 3px;
    color: hsla(0, 0%, 100%, .8);
    text-align: center
}

.user-header .usrhd_follow {
    display: block;
    width: 126px;
    height: 30px;
    margin: 6px auto 0;
    border: 1px solid hsla(0, 0%, 100%, .8);
    border-radius: 15px;
    box-sizing: border-box;
    line-height: 28px;
    font-size: 13px;
    color: #fff;
    text-align: center
}

.user-header .usrhd_plus {
    position: relative;
    top: 1px;
    width: 12px;
    height: 12px;
    margin-right: 4px
}

.user-header .u-yyrtag {
    display: inline-block;
    height: 11px;
    margin-left: 4px;
    padding: 0 2px;
    vertical-align: middle;
    color: hsla(0, 0%, 100%, .6);
    font-size: 8px;
    line-height: 10px;
    border-radius: 2px
}

.user-header .u-yyrtag:after {
    border-color: hsla(0, 0%, 100%, .4)
}

@media screen and (min-width:360px) {
    .user-header .usrhd_in {
        margin-top: 1%
    }
    .user-header .usrhd_tfl {
        padding-right: 5%
    }
    .user-header .usrhd_tfr {
        padding-left: 5%
    }
}

@media screen and (min-width:375px) {
    .user-header .usrhd_in {
        margin-top: 2.5%
    }
}

.usr-svg {
    display: inline-block;
    width: 21px;
    height: 21px;
    fill: currentColor;
    font: inherit
}

.usr-svg-musician .svg_st0 {
    fill: #f0483b
}

.usr-svg-musician .svg_st1 {
    fill: #fff
}

.usr-svg-v .svg_st0 {
    fill: #ed4036
}

.usr-svg-v .svg_st1 {
    fill: #fff
}

.usr-svg-expert .svg_st0 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #ffbd20
}

.usr-svg-expert .svg_st1 {
    fill: #fff
}

.usr-svg-member .svg_st0 {
    fill: #fe672e
}

.usr-svg-member .svg_st1 {
    fill: #fff
}

.usr-svg-male .svg_st0 {
    fill: #47a1ce
}

.usr-svg-male .svg_st1 {
    fill: #fff
}

.usr-svg-female .svg_st0 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #ff86b6
}

.usr-svg-female .svg_st1 {
    fill-rule: evenodd;
    clip-rule: evenodd;
    fill: #fff
}

.usr-svg-hjvip {
    width: 36px;
    height: 18px;
    margin-left: 5px
}

.usr-svg-musicpackage {
    fill: #fc5053;
    width: 18px;
    height: 18px;
    margin-left: 5px
}

.usr-svg-annualfee {
    width: 37px;
    height: 13px;
    margin-left: 5px
}

.usrl-tag {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    top: -2px;
    height: 16px;
    line-height: 16px;
    margin-right: 4px;
    font-size: 11px;
    padding: 0 2px;
    color: #d33a31
}

.usrl-tag:after {
    border-color: #e03f40
}

.usrl-corner {
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    background: url(radio_pay_3x.png) no-repeat;
    background-size: 28px auto
}

.usrl_tl {
    height: 28px;
    padding-left: 10px;
    background-color: #eeeff0;
    font-size: 12px;
    color: #666;
    line-height: 28px
}

.usrl_itm {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    padding-left: 6px
}

.usrl_fl {
    position: relative;
    top: 3px;
    width: 50px;
    height: 50px;
    margin-right: 10px
}

.usrl_fl:after {
    border-color: rgba(0, 0, 0, .1)
}

.usrl_fr {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 1%;
    padding: 3px 10px 3px 0;
    height: 50px;
    overflow: hidden
}

.usrl_fr:after {
    border-bottom-color: rgba(0, 0, 0, .1)
}

.usrl_ft {
    margin-top: 6px;
    height: 20px;
    line-height: 20px;
    font-size: 17px;
    color: #333
}

.usrl_fb {
    margin-top: 5px;
    height: 14px;
    line-height: 14px;
    font-size: 12px;
    color: #888
}

.user-plybef {
    position: relative;
    min-height: 200px
}

.usrl_heart {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4)
}

.usrl_svheart {
    position: absolute;
    top: 12px;
    left: 10px;
    width: 30px;
    height: 26px;
    fill: #fff
}

.usrpl_more {
    height: 56px;
    line-height: 56px;
    text-align: center;
    color: #666
}

.usrpl_right {
    position: relative;
    top: 0;
    width: 6px;
    height: 11px;
    color: #aaa;
    margin-left: 4px
}

.m-present .mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50%;
    opacity: 1;
    transition: opacity .3s
}

.m-present .mask:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .7
}

.m-present .f-bd-btm:after {
    border-color: hsla(0, 0%, 100%, .1)
}

.m-toast {
    opacity: 1
}

.f-fx {
    display: -ms-flexbox;
    display: flex
}

.f-fxv {
    -ms-flex-align: center;
    align-items: center
}

.f-fxc {
    -ms-flex: 1;
    flex: 1;
    width: 1%
}

.f-fxc-no {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto
}

.m-presenttop {
    text-align: center;
    margin: 0 10px;
    z-index: 9;
    position: relative
}

.m-presenttop .radioinfo {
    margin: 52.5px 0 0
}

.m-presenttop .radioinfo .cover {
    height: 200px;
    width: 100%;
    margin-bottom: 15px
}

.m-presenttop .radioinfo .cover:before {
    background-clip: content-box;
    background: url(present_bg.png) repeat-x;
    background-size: 100% 100%;
    height: 109.5px;
    width: 100%;
    z-index: -1;
    position: absolute;
    top: 45.5px;
    left: 0;
    content: ""
}

.m-presenttop .radioinfo .name {
    color: #333;
    font-size: 18px
}

.m-presenttop .shareinfo .description {
    color: #999;
    line-height: 13px;
    font-size: 13px;
    margin-top: 40px
}

.m-presenttop .shareinfo .sharebtn {
    margin-top: 10px;
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px
}

.m-presenttop .gobuy {
    height: 51px;
    padding-top: 15px;
    color: #747474;
    font-size: 14px
}

.m-receivetop {
    text-align: center;
    margin: 0 10px;
    position: relative;
    z-index: 9;
    color: #fff
}

.m-receivetop .ownerInfo {
    font-size: 15px
}

.m-receivetop .ownerInfo .user {
    display: inline-block;
    margin-right: 10px;
    width: 40px;
    background-size: 40px auto
}

.m-receivetop .ownerInfo .u-img {
    margin-right: 10px;
    width: 40px
}

.m-receivetop .ownerInfo .username {
    margin-right: 5px;
    padding: 22.5px 0;
    text-align: left;
    word-break: break-all
}

.m-receivetop .ownerInfo .desp {
    opacity: .6;
    min-width: 135px
}

.m-receivetop .radioinfo {
    margin-top: 47px
}

.m-receivetop .radioinfo .cover {
    position: relative;
    display: inline-block
}

.m-receivetop .radioinfo .cover .price {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 13px;
    color: #fff;
    letter-spacing: 0
}

.m-receivetop .radioinfo .gift:before {
    opacity: .3;
    z-index: 99;
    position: absolute;
    bottom: 6px;
    content: "";
    height: 50px;
    width: 200px;
    background-image: linear-gradient(-180deg, transparent, #000)
}

.m-receivetop .radioinfo .gift:after {
    background: url(ribbon.png) 50% no-repeat;
    z-index: 999;
    position: absolute;
    left: -20px;
    top: -24px;
    content: "";
    height: 224px;
    width: 220px;
    background-size: 100% auto
}

.m-receivetop .radioinfo .name {
    margin-top: 15px;
    line-height: 30px;
    font-size: 18px
}

.m-receivetop .radioinfo .description {
    margin-bottom: 37px;
    color: #fff;
    opacity: .3;
    font-size: 13px
}

.m-receivetop .receiveradio {
    height: 90px
}

.m-receivetop .receiveradio .receivebtn {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px
}

.m-receivetop .receiveradio .tip {
    margin-top: 12px;
    line-height: 13px;
    color: #fff;
    opacity: .7;
    font-size: 13px
}

.dotting {
    display: inline-block;
    width: 10px;
    min-height: 2px;
    padding-right: 2px;
    border-left: 2px solid currentColor;
    border-right: 2px solid currentColor;
    background-color: currentColor;
    background-clip: content-box;
    box-sizing: border-box;
    animation: dot 2s infinite step-start both
}

.dotting:before {
    content: "...";
    content: ""
}

:root .dotting {
    margin-left: 2px;
    padding-left: 2px
}

@keyframes dot {
    25% {
        border-color: transparent;
        background-color: transparent
    }
    50% {
        border-right-color: transparent;
        background-color: transparent
    }
    75% {
        border-right-color: transparent
    }
}

.m-receivelist {
    margin: 0 10px;
    position: relative;
    z-index: 9
}

.m-receivelist .num {
    font-size: 15px;
    line-height: 15px;
    margin-left: 7px;
    margin-bottom: 10px
}

.m-receivelist .redTag {
    height: 16px;
    background-color: #d33a31;
    width: 3px;
    border-radius: 1.5px;
    display: inline-block;
    position: absolute;
    left: -2px
}

.m-receivelist .list .item {
    font-size: 15px
}

.m-receivelist .list .item .detail {
    padding: 16.5px 0
}

.m-receivelist .list .item .name {
    word-break: break-all
}

.m-receivelist .list .item .time {
    font-size: 12px;
    margin-right: 5px;
    opacity: .5
}

.m-receivelist .list .user {
    display: inline-block;
    margin-right: 10px;
    width: 40px;
    background-size: 40px auto
}

.m-buysucc {
    width: 100%;
    min-height: 100%;
    padding-bottom: 55px;
    box-sizing: border-box;
    background-color: #f8f8f8
}

.m-buysucc .top {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    padding: 25px 15px 15px;
    background-color: #fff
}

.m-buysucc .top .bg {
    display: block;
    width: 150px;
    height: 100px;
    margin: 10px 0;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.m-buysucc .top .msg {
    color: #333;
    font-size: 17px;
    line-height: 20px
}

.m-buysucc .lead {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    margin: 10px 0;
    padding: 30px 0 20px;
    background-color: #fff
}

.m-buysucc .lead .piccover {
    width: 100%;
    margin: 10px 0 24px;
    padding: 0 20px;
    box-sizing: border-box
}

.m-buysucc .lead .pic {
    display: block;
    width: 100%;
    padding-top: 50.58%;
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-origin: border-box
}

.m-buysucc .desc {
    padding: 5px 33px;
    color: #666;
    font-size: 13px;
    line-height: 16px
}

.m-buysucc .footer {
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 55px;
    text-align: center;
    background-color: #fff
}

.m-buysucc .footer .footer-btn {
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    height: 40px;
    line-height: 40px;
    margin: 8px 30px
}

.m-buysucc .footer .footer-btn:before {
    content: "";
    display: inline-block;
    position: relative;
    top: 5px;
    width: 21px;
    height: 23px;
    background: url() no-repeat;
    background-size: contain;
    margin-right: 4px
}

.m-buysucc-radio .top .bg {
    background-image: url(radio_success@2x.png)
}

.m-buysucc-radio .lead .pic {
    background-image: url(radio_bg@2x.png)
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-buysucc-radio .top .bg {
        background-image: url(radio_success@3x.png)
    }
    .m-buysucc-radio .lead .pic {
        background-image: url(radio_bg@3x.png)
    }
}

.m-radiopgm {
    min-height: 100%;
    background-color: #fbfcfd
}

.m-radiopgm .m-djprogram .plist {
    margin-bottom: 0
}

.m-radio .m-djprogram {
    background: #fbfcfd
}

.m-djprogram .plist {
    width: 100%;
    margin-bottom: 5px
}

.m-djprogram .plist .title {
    height: 30px;
    padding-left: 10px;
    line-height: 30px;
    color: #666;
    font-size: 12px;
    background-color: rgba(0, 0, 0, .05)
}

.m-djprogram .plist .list li {
    position: relative
}

.m-djprogram .plist .list li:first-child {
    border-top: none
}

.m-djprogram .plist .list .cover {
    box-sizing: border-box;
    padding: 10px 0 12px;
    margin-left: 42px
}

.m-djprogram .plist .list h3 {
    padding-right: 50px;
    word-wrap: break-word;
    word-break: break-all
}

.m-djprogram .plist .list .rank {
    position: absolute;
    left: -42px;
    width: 42px;
    padding: 12px 0 0;
    font-size: 17px;
    color: #999;
    line-height: 1;
    text-align: center
}

.m-djprogram .plist .list .rank.rank-three {
    font-size: 15px
}

.m-djprogram .plist .list .rank.rank-four {
    font-size: 13px
}

.m-djprogram .plist .list .rank.rank-more {
    font-size: 9px
}

.m-djprogram .plist .list .play {
    right: 12px
}

.m-djprogram .plist .playnum {
    margin-left: 22px
}

.m-djprogram .plist .playnum .u-svg-playcount {
    margin-top: -2px;
    margin-right: 3px
}

.m-djprogram .plist .playtime {
    margin-left: 15px
}

.m-djprogram .plist .playtime .u-svg-duration {
    margin-top: -1px;
    margin-right: 4px
}

.m-djprogram .plist .sign em {
    display: inline-block;
    width: 25px;
    height: 14px;
    margin-right: 3px;
    box-sizing: border-box;
    line-height: 14px;
    text-align: center;
    vertical-align: middle;
    font-size: 9px
}

.m-djprogram .plist .test {
    position: relative;
    top: -1px;
    color: #5ab5e7
}

.m-djprogram .plist .test:after {
    border-color: #5ab5e7
}

.m-djprogram .plist .pay {
    position: relative;
    top: -1px;
    color: #d33a31
}

.m-djprogram .plist .pay:after {
    border-color: #d33a31
}

.g-mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0, 0, 0, .85)
}

.m-popwin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    width: 67.63%;
    min-width: 250px;
    max-width: 320px;
    box-sizing: border-box;
    line-height: 1.1;
    border-radius: 4px;
    background: #fff
}

.m-popwin .close {
    background: #c3c7ca;
    position: absolute;
    top: -10px;
    right: -10px;
    width: 27px;
    height: 27px;
    border-radius: 27px
}

.m-popwin .close svg {
    fill: #777;
    width: 100%;
    height: 100%
}

.m-popwin .close:active {
    background: #afb3b5
}

.m-popwin .button {
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-radius: 40px;
    background: #e94339;
    font-size: 17px;
    color: #fff;
    text-align: center
}

.m-popwin .button:nth-child(n) {
    margin-top: 15px
}

.m-popwin .button:first-child {
    margin-top: 0
}

.m-popwin .button .origin {
    color: hsla(0, 0%, 100%, .6);
    font-size: 14px
}

.m-popwin .button .origin>i {
    text-decoration: line-through
}

.m-popwin .btnwrap {
    padding: 5.35% 7.14%
}

.m-popwin .btnwrap .msg {
    font-size: 14px;
    line-height: 19px;
    color: #666;
    margin-bottom: 20px
}

.m-popwin .btnwrap .title {
    padding-bottom: 8px;
    font-size: 17px;
    color: #333;
    line-height: 25px
}

.m-popwin .picwrap {
    width: 100%;
    height: 0;
    padding-top: 48.2%;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-repeat: no-repeat;
    background-size: 100% 135px;
    background-position: 0
}

.m-popwin .picwrap.z-radio {
    background-image: url(share_radio_window@2x.png)
}

.m-popwin .picwrap.z-feeradio {
    background-image: url(share_feeradio_window@2x.png)
}

.m-popwin .picwrap.z-vip {
    background-image: url(share_vip_window@2x.png)
}

.m-popwin .extra {
    padding: 0 0 10px;
    text-align: center;
    color: #fe672e;
    font-size: 13px
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-popwin .picwrap.z-radio {
        background-image: url(share_radio_window@3x.png)
    }
    .m-popwin .picwrap.z-feeradio {
        background-image: url(share_feeradio_window@3x.png)
    }
    .m-popwin .picwrap.z-vip {
        background-image: url(share_vip_window@3x.png)
    }
}

.f-link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}

.m-radio {
    position: relative;
    min-height: 100%;
    background-color: #fbfcfd
}

.m-radio .m-radiotab {
    background: #fbfcfd
}

.m-radio .m-radiotab em {
    display: inline-block;
    margin-left: 5px;
    margin-top: 2px;
    color: #999;
    font-size: 13px;
    vertical-align: middle
}

.m-radio .tabctitem {
    position: relative;
    min-height: 200px
}

.m-radio .footerprst {
    display: -ms-flexbox;
    display: flex
}

.m-spin {
    position: relative;
    width: 100%;
    height: 200px
}

.m-bill .list li {
    line-height: 1;
    background-color: #fbfcfd
}

.m-bill .list .detail {
    display: block;
    height: 100%;
    margin-left: 0;
    border: none
}

.m-bill .list h3 {
    line-height: 1.4;
    font-size: 17px;
    padding-right: 50px;
    color: #333;
    word-wrap: break-word;
    word-break: break-all
}

.m-bill .list p {
    padding-right: 40px;
    font-size: 12px;
    color: #999
}

.m-bill .list .play {
    position: absolute;
    top: 50%;
    bottom: 0;
    right: 15px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    background-size: 24px;
    background-position: 50%;
    background-repeat: no-repeat
}

.m-bill-radio .list li p {
    height: 18px;
    line-height: 18px;
    padding-top: 4px;
    color: #999
}

.m-radio .prstdown .footer-wrap {
    padding: 7px 10px
}

.m-radio .prstdown .u-btn {
    margin-left: 0
}

.m-radio .prstdown.z-db .u-btn {
    font-size: 15px
}

.m-radio .prstdown.z-db .u-btn:nth-child(2) {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 80px;
    box-sizing: border-box;
    margin-right: 10px
}

.m-song-radio {
    position: relative;
    padding-top: 75%;
    height: 0;
    background-size: cover;
    background-position: 50%;
    overflow: hidden
}

.m-song-radio img {
    width: 100%
}

.m-song-radio .subc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    color: #fff
}

.m-song-radio .subc .topcover {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .32), transparent)
}

.m-song-radio .subc .btmcover {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 115px;
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .32), transparent)
}

.m-song-radio .subc .uname {
    position: absolute;
    left: 10px;
    bottom: 20px;
    right: 135px;
    font-size: 18px;
    line-height: 24px
}

.m-song-radio .subc .uname .viptag {
    display: inline-block;
    width: 46px;
    height: 14px;
    margin-top: -2px;
    margin-right: 2px;
    color: #fff;
    font-size: 10px;
    line-height: 16px;
    text-align: center;
    vertical-align: middle
}

.m-song-radio .subc .uname .viptag:after {
    border-color: hsla(0, 0%, 100%, .8)
}

.m-song-radio .subc .uname.z-slg {
    bottom: 42px
}

.m-song-radio .subc .slogan,
.m-song-radio .subc .usubscribe {
    position: absolute;
    left: 10px;
    bottom: 20px;
    right: 135px;
    font-size: 13px;
    line-height: 15px;
    color: hsla(0, 0%, 100%, .8)
}

.m-song-radio .subc .z-long {
    right: 20px
}

.m-song-radio .subc .slogan.z-long2 {
    right: 85px
}

.m-song-radio .subc .ubuy,
.m-song-radio .subc .vipfree {
    position: absolute;
    bottom: 20px;
    right: 0;
    width: 100px;
    font-size: 13px;
    line-height: 1;
    text-align: center;
    color: hsla(0, 0%, 100%, .5)
}

.m-song-radio .subc .sub {
    position: absolute;
    bottom: 20px;
    right: 10px;
    min-width: 80px;
    height: 30px;
    line-height: 30px;
    padding: 0 10px 0 30px;
    box-sizing: border-box;
    font-size: 12px;
    text-align: center;
    letter-spacing: 3px;
    border: 1px solid #fff;
    border-radius: 9999px;
    background-image: url();
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: 13px;
    color: #fff
}

.m-song-radio .subc .sub.z-hassub {
    bottom: 41px
}

.m-song-radio .subc .buy {
    position: absolute;
    bottom: 20px;
    right: 10px;
    min-width: 81px;
    height: 34px;
    line-height: 34px;
    padding: 0 13px;
    box-sizing: border-box;
    font-size: 12px;
    text-align: center;
    border-radius: 9999px;
    color: #fff;
    background-color: #d33a31
}

.m-song-radio .subc .buy.z-hasbuy {
    bottom: 41px
}

.m-song-radio .subc .unlock {
    position: absolute;
    bottom: 20px;
    right: 10px;
    min-width: 80px;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    font-size: 12px;
    text-align: center;
    color: #fff
}

.m-song-radio .subc .unlock:after {
    position: absolute;
    z-index: 2;
    content: "";
    top: 0;
    left: 0;
    pointer-events: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    transform-origin: top left;
    border: 1px solid #fff;
    border-radius: 37.5%/100%
}

.m-song-radio .tag {
    position: absolute;
    top: 15px;
    left: 0;
    width: 44px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    background-color: rgba(217, 48, 48, .8);
    border-radius: 0 9999px 9999px 0;
    font-size: 12px
}

.m-song-radio .slogan {
    font-size: 13px;
    color: #fff;
    line-height: 13px
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-song-radio .subc .sub {
        background-image: url()
    }
}

.m-radio .m-djdetail {
    padding-top: 20px;
    padding-bottom: 40px;
    background: #fbfcfd
}

.m-djdetail section {
    margin-bottom: 30px
}

.m-djdetail .content {
    color: #666;
    line-height: 23px;
    word-wrap: break-word;
    word-break: break-all
}

.m-djdetail .imgbox {
    position: relative;
    margin-top: 15px;
    box-sizing: border-box;
    height: 0
}

.m-djdetail .imgbox .img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%
}

.m-djdetail .title {
    position: relative;
    margin-left: 10px;
    font-size: 14px;
    color: #333;
    line-height: 20px
}

.m-djdetail .title:before {
    content: "";
    position: absolute;
    left: -10px;
    top: 2px;
    width: 2px;
    height: 16px;
    background-color: #d33a31
}

.m-djdetail .anchor {
    padding: 0 10px
}

.m-djdetail .anchor .title {
    margin-left: 0
}

.m-djdetail .anchor .coverbox {
    padding-top: 5px
}

.m-djdetail .anchor .content {
    margin-top: 10px
}

.m-djdetail .cnt {
    position: absolute;
    top: 50%;
    left: 60px;
    right: 0;
    height: 100%;
    transform: translateY(-50%)
}

.m-djdetail .cnt h3 {
    margin: 6px 0 10px;
    font-size: 16px;
    color: #333;
    line-height: 1
}

.m-djdetail .cnt p {
    color: #999;
    line-height: 16px
}

.m-djdetail .publisher {
    position: relative;
    margin-top: 15px;
    padding: 10px;
    box-sizing: border-box;
    width: 100%;
    height: 70px
}

.m-djdetail .publisher .clear {
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
    overflow: hidden;
    clear: both
}

.m-djdetail .publisher .avabox {
    float: left;
    width: 70px;
    height: 70px;
    padding: 10px;
    margin: -10px 0 0 -10px;
    box-sizing: border-box;
    vertical-align: middle
}

.m-djdetail .publisher .ava {
    width: 100%;
    height: 100%;
    border-radius: 9999px
}

.m-djdetail .publisher h3 {
    margin: 4px 10px 0 0;
    color: #333
}

.m-djdetail .publisher .nickname {
    display: inline-block;
    padding: 10px 10px 8px
}

.m-djdetail .publisher p {
    margin-left: 10px;
    margin-right: 10px
}

.m-djdetail .publisher .auth {
    position: absolute;
    left: 47px;
    bottom: 10px
}

.m-djdetail .cv {
    padding: 0 10px
}

.m-djdetail .cv article {
    color: #666;
    font-size: 14px
}

.m-djdetail .cv .sort {
    margin-bottom: 5px;
    line-height: 14px
}

.m-djdetail .cv .tip {
    display: inline-block;
    height: 14px;
    padding: 1px 3px;
    box-sizing: border-box;
    line-height: 12px;
    color: #d33a31;
    font-size: 10px;
    vertical-align: middle;
    border: 1px solid rgba(211, 58, 49, .7)
}

.m-djdetail .cv .title {
    margin-left: 0
}

.m-djdetail .cv .coverbox {
    padding-top: 5px
}

.m-djdetail .cv .content {
    margin-top: 10px
}

.m-djdetail .preview .title {
    margin: 0 0 15px 10px
}

.m-djdetail .preview li {
    position: relative;
    margin-left: 10px;
    padding: 10px 0 12px
}

.m-djdetail .preview .pay,
.m-djdetail .preview .test {
    display: inline-block;
    width: 25px;
    height: 14px;
    margin-top: -1px;
    margin-right: 3px;
    box-sizing: border-box;
    line-height: 14px;
    text-align: center;
    vertical-align: middle;
    font-size: 9px
}

.m-djdetail .preview .test {
    color: #5ab5e7
}

.m-djdetail .preview .test:after {
    border-color: #5ab5e7
}

.m-djdetail .preview .pay {
    color: #d33a31
}

.m-djdetail .preview .pay:after {
    border-color: #d33a31
}

.m-djdetail .detail .zaned .u-svg-zan {
    margin-top: -3px;
    margin-right: 3px
}

.m-djdetail .detail .critic {
    margin-left: 10px
}

.m-djdetail .detail .critic .u-svg-critic {
    margin-top: -2px;
    margin-right: 4px
}

.m-djdetail .detail .played {
    margin-left: 9px
}

.m-djdetail .detail .played .u-svg-played {
    margin-top: -2px;
    margin-right: 3px
}

.m-djdetail .detail .playnum {
    margin-left: 22px
}

.m-djdetail .detail .playnum .u-svg-playcount {
    margin-top: -3px;
    margin-right: 3px
}

.m-djdetail .detail .playtime {
    margin-left: 15px
}

.m-djdetail .detail .playtime .u-svg-duration {
    margin-top: -3px;
    margin-right: 4px
}

.m-djdetail .more {
    height: 50px;
    margin-bottom: -15px;
    text-align: center;
    font-size: 14px;
    color: #999;
    line-height: 50px
}

.m-djdetail .more .u-svg-more {
    margin-top: -2px;
    margin-left: 7px
}

.m-djdetail .videomd {
    padding: 0 10px
}

.m-djdetail .videomd .img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin-top: 0
}

.m-djdetail .videomd .title {
    margin-left: 0
}

.m-djdetail .videomd .content {
    margin-top: 10px
}

.m-djdetail .videomd .videobox {
    position: relative;
    height: 0;
    box-sizing: border-box;
    padding-top: 56.25%;
    margin-top: 15px
}

.m-djdetail .videomd .dura {
    position: absolute;
    right: 5px;
    bottom: 5px;
    z-index: 1;
    font-size: 12px;
    line-height: 16px;
    color: #fff
}

.m-djdetail .videomd .u-svg-playvideo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1
}

.m-djdetail .videomd .cover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-color: rgba(0, 0, 0, .3)
}

.m-djdetail .wcritic {
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal
}

.m-djdetail .wcritic .list {
    margin-top: 15px;
    margin-left: 10px
}

.m-djdetail .wcritic .pro {
    position: relative;
    height: 30px;
    margin: 10px 0 8px
}

.m-djdetail .wcritic .pro img {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: url() no-repeat 50% #e1e3e4;
    background-size: 17px 17px
}

.m-djdetail .wcritic .nt {
    display: inline-block;
    position: absolute;
    left: 40px;
    top: 8px;
    font-size: 14px;
    color: #666;
    line-height: 1
}

.m-djdetail .wcritic .msgwrap {
    margin-left: 40px;
    padding-right: 10px
}

.m-djdetail .wcritic .msgwrap .msg {
    color: #333;
    font-size: 16px;
    line-height: 23px
}

.m-djdetail .wcritic .msgwrap .expression {
    width: 70px;
    height: 70px;
    margin-top: 3px
}

.m-djdetail .wcritic .msgwrap .img {
    display: inline-block;
    width: 100%;
    height: 100%
}

.m-djdetail .wcritic .msgwrap .from {
    padding: 10px 0 15px;
    color: #999;
    font-size: 12px;
    line-height: 1
}

.m-djdetail .wcritic .msgwrap .cmt_emoji,
.m-djdetail .wcritic .msgwrap .cmt_text {
    vertical-align: middle
}

.m-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: #fff
}

.m-footer-radio {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 7px 10px
}

.m-footer-radio .u-btn {
    height: 40px;
    line-height: 40px
}

.m-footer-radio .freebtn {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 80px;
    margin-right: 7px;
    box-sizing: border-box;
    border: 1px solid #d33a31;
    line-height: 38px
}

.m-footer-radio .freebtn .text {
    display: inline-block;
    vertical-align: middle;
    color: #d33a31;
    font-size: 15px
}

.m-footer-radio .buybtn {
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    font-size: 15px
}

.m-footer-radio .buybtn .vipradio {
    color: #fff;
    font-size: 15px;
    line-height: 21px
}

.m-footer-radio .buybtn .subprice {
    color: hsla(0, 0%, 100%, .6);
    font-size: 11px
}

.m-footer-radio .buybtn .origin {
    text-decoration: line-through
}

.m-footer-radio .u-svg-flradio {
    width: 17px;
    height: 17px;
    margin-right: 5px;
    margin-top: -2px
}

@media screen and (device-width:375px) and (device-height:812px) {
    .m-footer {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom)
    }
}

@media screen and (max-width:320px) {
    .m-footer.m-footer-radio .freebtn,
    .m-footer.m-footer-radio .presentbtn {
        width: 70px
    }
}

.m-radio .u-btn {
    font-size: 15px
}

.m-radio .presentbtn {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: block;
    width: 80px;
    height: 40px;
    margin-right: 7px;
    color: #d33a31;
    font-size: 15px;
    line-height: 40px;
    border: 1px solid #d33a31;
    box-sizing: border-box;
    background-color: #fff
}

.m-radio .presentbtn .u-svg-prsticon {
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 5px;
    margin-top: -5px;
    vertical-align: middle
}

.m-presentmodal {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 100;
    background-color: rgba(0, 0, 0, .6)
}

.m-presentmodal_ct {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: #fff
}

.m-presentmodal_tips {
    padding: 0 10px;
    margin-bottom: 10px;
    color: #666;
    font-size: 14px;
    line-height: 18px
}

.m-presentmodal .prsthead {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 45px;
    padding: 5px 10px;
    line-height: 25px
}

.m-presentmodal .prsthead .pay-svg-payclose {
    margin-top: -4px;
    margin-left: 6px;
    width: 15px;
    height: 15px
}

.m-presentmodal .prsthead .tt {
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    color: #888;
    font-size: 14px
}

.m-presentmodal .prsthead .close {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 21px;
    height: 21px
}

.m-presentmodal .prstct {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin: 15px 10px 20px
}

.m-presentmodal .prstct .coverimg {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 90px;
    height: 90px
}

.m-presentmodal .prstct .coverimg .img {
    display: block;
    width: 100%;
    height: 100%
}

.m-presentmodal .prstct .desc {
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    margin-left: 10px;
    color: #333;
    font-size: 17px
}

.m-presentmodal .prstct .desc .count {
    margin-top: 19px;
    color: #aaa;
    font-size: 14px
}

.m-presentmodal .prstct .desc .num {
    color: #d33a31;
    font-size: 16px
}

.m-presentmodal .prstct .desc .price {
    margin-top: 15px;
    color: #d33a31;
    font-size: 21px
}

.m-presentmodal .prstbtns {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 55px;
    margin: 0 10px;
    color: #fff;
    font-size: 16px;
    text-align: center
}

.m-presentmodal .prstbtns .action {
    height: 40px;
    box-sizing: border-box;
    line-height: 40px;
    border-radius: 20px
}

.m-presentmodal .prstbtns .buyact {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 100px;
    margin-right: 10px;
    color: #d33a31;
    border: 1px solid #d33a31;
    background-color: #fff
}

.m-presentmodal .prstbtns .sendact {
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    color: #fff;
    background-color: #d33a31
}

.m-presentmodal .prstbtns .text:before {
    content: "";
    display: inline-block;
    width: 22px;
    height: 22px;
    margin-top: -4px;
    margin-right: 7px;
    background-repeat: no-repeat;
    background-size: 22px 22px;
    vertical-align: middle
}

.m-presentmodal .prstbtns .zfbbtn:before {
    background-image: url()
}

.m-presentmodal .prstbtns .wxbtn:before {
    background-image: url()
}

.m-presentmodal .qcount {
    padding: 0 10px;
    margin: 2px 0 10px
}

.m-presentmodal .qcount_tl {
    margin-right: 10px;
    font-size: 14px;
    line-height: 30px
}

.m-presentmodal .qcount_opa {
    display: -ms-flexbox;
    display: flex;
    width: 160px;
    height: 35px;
    margin-top: 7px
}

.m-presentmodal .qcount_opa:after {
    border-color: #999;
    border-radius: 3.12%/14.2%
}

.m-presentmodal .qcount_scom,
.m-presentmodal .qcount_sh {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.m-presentmodal .qcount_scom {
    position: relative;
    width: 35px;
    font-size: 40px
}

.m-presentmodal .qcount_scom:after {
    content: " ";
    position: absolute;
    left: 12px;
    top: 17px;
    width: 11px;
    height: 1px;
    background-color: #666
}

.m-presentmodal .qcount_scom.z-dis:after {
    background-color: #d1d1d1
}

.m-presentmodal .qcount_add:before {
    content: " ";
    position: absolute;
    left: 17px;
    top: 12px;
    height: 11px;
    width: 1px;
    background-color: #666
}

.m-presentmodal .qcount_add.z-dis:before {
    background-color: #d1d1d1
}

.m-presentmodal .qcount_sh {
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    font-size: 15px
}

.m-presentmodal .qcount_sh:after {
    border-color: #999
}

.m-presentmodal-share {
    background-color: rgba(0, 0, 0, .8)
}

.m-presentmodal-share_ct {
    top: 15px;
    right: 20px;
    left: auto;
    width: 257px;
    height: 124px;
    background-image: url(share_win_2x.png);
    background-size: 257px 124px;
    background-position: 0 0;
    background-color: transparent
}

.opacity-enter {
    opacity: 0
}

.opacity-enter.opacity-enter-active {
    opacity: 1;
    transition: opacity .3s ease-in;
    transition-delay: .1s
}

.opacity-appear {
    opacity: 0
}

.opacity-appear.opacity-appear-active {
    opacity: 1;
    transition: opacity .3s ease-in;
    transition-delay: .1s
}

.opacity-exit {
    opacity: 1
}

.opacity-exit.opacity-exit-active {
    opacity: 0;
    transition: opacity .3s ease-out
}

.changein-enter {
    transform: translateX(100%)
}

.changein-enter.changein-enter-active {
    transform: translateX(0);
    transition: transform .3s ease-out
}

.changein-appear {
    transform: translateX(100%)
}

.changein-appear.changein-appear-active {
    transform: translateX(0);
    transition: transform .3s ease-out
}

.changein-exit {
    transform: translateX(0)
}

.changein-exit.changein-exit-active {
    transform: translateX(100%);
    transition: transform .3s ease-out
}

.changein2-exit {
    transform: translateX(0)
}

.changein2-exit.changein-exit-active {
    transform: translateX(100%);
    transition: transform .3s ease-out
}

.changeout-exit {
    transform: translateX(0)
}

.changeout-exit.changeout-exit-active {
    transform: translateX(-100%);
    transition: transform .3s ease-out
}

.changeout2-enter {
    transform: translateX(-100%)
}

.changeout2-enter.changeout2-enter-active {
    transform: translateX(0);
    transition: transform .3s ease-out
}

.changeout2-appear {
    transform: translateX(-100%)
}

.changeout2-appear.changeout2-appear-active {
    transform: translateX(0);
    transition: transform .3s ease-out
}

.changeout2-exit {
    transform: translateX(0)
}

.changeout2-exit.changeout2-exit-active {
    transform: translateX(-100%);
    transition: transform .3s ease-out
}

.c-modal .c-modal-title p {
    -webkit-user-select: initial;
    -ms-user-select: initial;
    user-select: auto
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-presentmodal .m-presentmodal-share_ct {
        background-image: url(share_win_3x.png)
    }
    .m-presentmodal .prstbt .zfbbtn:before {
        background-image: url()
    }
    .m-presentmodal .prstbt .wxbtn:before {
        background-image: url()
    }
}

.unlockwin-wrapper {
    width: 64%;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    box-sizing: border-box
}

.unlockwin-wrapper .unlockwin-cont {
    width: 100%;
    background: #fff;
    border-radius: 4px;
    padding: 35px 20px 20px;
    box-sizing: border-box
}

.unlockwin-wrapper .unlockwin__title {
    font-size: 19px;
    margin-bottom: 8px;
    line-height: 26px
}

.unlockwin-wrapper .unlockwin__title:before {
    content: "";
    display: inline-block;
    position: relative;
    width: 9px;
    height: 17px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='18' height='34' viewBox='0 0 18 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23DC3922' fill-rule='evenodd'%3E%3Cpath d='M11 30v2a2 2 0 1 1-4 0V16a2 2 0 1 1 4 0v4h2a2 2 0 1 1 0 4h-2v2h2a2 2 0 1 1 0 4h-2z'/%3E%3Cpath d='M9 18A9 9 0 1 1 9 0a9 9 0 0 1 0 18zm0-4.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    margin-right: 4px
}

.unlockwin-wrapper .unlockwin__subtit {
    font-size: 13px;
    color: #999;
    line-height: 18px
}

.unlockwin-wrapper .unlockwin__input {
    width: 100%;
    margin: 20px 0 60px;
    padding: 10px 15px 10px 10px;
    font-size: 16px;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    box-sizing: border-box
}

.unlockwin-wrapper .unlockwin__btn-save {
    width: 100%;
    height: 45px;
    background-color: #dc3927;
    line-height: 45px;
    border-radius: 23px;
    color: #fff;
    font-size: 16px
}

.unlockwin__btn-close {
    margin: 20px auto 0;
    width: 30px;
    height: 30px;
    background: url("data:image/svg+xml;charset=utf-8,%3Csvg width='64' height='64' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cellipse cx='31' cy='31' rx='30.537' ry='31' stroke='%23FFF' stroke-width='2' transform='translate(1 1)'/%3E%3Cg transform='rotate(45 9.808 41.692)' fill='%23FFF'%3E%3Crect y='18.674' width='38' height='2' rx='1'/%3E%3Crect transform='rotate(90 19 19.674)' y='18.674' width='38' height='2' rx='1'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: contain
}

.g-wrap {
    background-color: #fbfcfd
}

.m-mv {
    min-height: 100%;
    box-sizing: border-box
}

.m-mv .m-talkc {
    position: relative
}

.m-mv .m-related .tt {
    width: 100%;
    height: 25px;
    padding-left: 10px;
    box-sizing: border-box;
    font-size: 12px;
    color: #666;
    line-height: 25px;
    background-color: rgba(0, 0, 0, .05)
}

.m-mv .m-related .u-song {
    margin-left: 10px
}

.m-mv .m-related .sgich_tl {
    font-size: 15px
}

.m-mv .m-related .sgich_info {
    font-size: 11px
}

.m-mv .m-ctscroll {
    position: absolute;
    top: 0;
    bottom: 55px;
    left: 0;
    right: 0;
    margin-top: 56.25%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

@media screen and (orientation:landscape) {
    .m-mv .m-ctscroll {
        position: relative;
        margin-top: 0
    }
}

.m-related-spin {
    min-height: 200px;
    position: relative
}

.m-related-mv .u-svg-more {
    margin-left: 7px;
    margin-top: -2px
}

.m-related-mv .m-list {
    padding-left: 6px;
    list-style: none
}

.m-related-mv .more {
    height: 50px;
    line-height: 50px;
    text-align: center
}

.m-related-mv .more .text {
    display: inline-block;
    color: #888;
    font-size: 13px;
    vertical-align: middle
}

.m-list-mv {
    padding-top: 3px
}

.m-list-mv .item {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 0;
    margin: 0
}

.m-list-mv .item .mvtag {
    position: relative;
    top: -2px
}

.m-list-mv .link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: block;
    width: 100%;
    height: 100%
}

.m-list-mv .cvr {
    position: relative;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 3px 0
}

.m-list-mv .cvr .count {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 50%;
    background-image: linear-gradient(-180deg, rgba(0, 0, 0, .2) 1%, transparent);
    line-height: 13px;
    color: #fff;
    font-size: 11px
}

.m-list-mv .cvr .num {
    position: absolute;
    top: 4px;
    right: 3px;
    padding-left: 16px;
    background-image: url();
    background-size: 12px 9px;
    background-position: 0 2px;
    background-repeat: no-repeat;
    text-shadow: 0 1px 0 rgba(0, 0, 0, .15)
}

.m-list-mv .cvr,
.m-list-mv .cvr .img {
    width: 107px;
    height: 60px
}

.m-list-mv .cnt {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    height: 60px;
    margin-left: 10px;
    padding: 3px 15px 3px 0
}

.m-list-mv .cnt .title {
    color: #333;
    font-size: 14px;
    line-height: 17px
}

.m-list-mv .cnt .title .mvtag {
    display: inline-block;
    width: 26px;
    height: 13px;
    margin-right: 6px;
    box-sizing: border-box;
    text-align: center;
    color: #d33a31;
    font-size: 9px;
    line-height: 14px
}

.m-list-mv .cnt .title .mvtag:after {
    border-color: #d33a31
}

.m-list-mv .cnt .singer {
    margin-top: 2px;
    color: #888;
    font-size: 11px;
    line-height: 16px
}

.spincover {
    position: relative;
    min-height: 200px
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-list-mv .cvr .count .num {
        background-image: url()
    }
}

.m-mvbox {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%
}

.m-mvsec {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 0
}

.m-mvsec .cvr {
    position: relative
}

.m-mvsec .cvr img {
    display: block;
    width: 100%;
    height: 100%
}

.m-mvsec .video.z-noshow {
    width: 1px;
    height: 1px
}

.m-mvsec .bg,
.m-mvsec .video,
.m-mvsec .videocover .img {
    width: 100%;
    height: 100%
}

.m-mvsec .videocover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2
}

.m-mvsec .bg {
    background: #000
}

.m-mvsec .cvr:after {
    width: 284px;
    height: 161px
}

.m-mvsec .play {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 46px;
    height: 46px;
    margin: auto
}

.m-titlemv {
    padding: 15px 10px 12px
}

.m-titlemv .u-svg-fold,
.m-titlemv .u-svg-unfold {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 12px;
    height: 7px
}

.m-titlemv .tt {
    line-height: 20px
}

.m-titlemv .tt .name {
    position: relative;
    color: #333;
    font-size: 17px;
    line-height: 25px
}

.m-titlemv .tt .name.z-desc {
    padding-right: 35px
}

.m-titlemv .tt .icon {
    display: inline-block;
    width: 24px;
    height: 13px;
    margin-right: 9px;
    margin-top: -2px;
    box-sizing: border-box;
    color: #d33a31;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    vertical-align: middle
}

.m-titlemv .tt .icon:after {
    border-color: #d33a31
}

.m-titlemv .singer {
    display: inline-block;
    margin: 11px 0 10px;
    color: #507daf;
    font-size: 13px;
    line-height: 14px
}

.m-titlemv .info {
    margin-top: 5px;
    font-size: 13px;
    color: #999
}

.m-titlemv .info .time {
    height: 14px;
    padding-right: 18px
}

.m-titlemv .info .played {
    margin-left: 18px
}

.m-titlemv .intrmv {
    margin: 0;
    padding-top: 5px;
    color: #666;
    font-size: 13px;
    line-height: 20px
}

.m-titlemv .intrmv.z-hide {
    display: none
}

.m-titlemv-vd {
    padding-top: 5px
}

.g-wrap {
    background-color: #fbfcfd
}

.m-mv {
    min-height: 100%;
    box-sizing: border-box
}

.m-mv .m-userinfo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding-top: 4px
}

.m-mv .m-userinfo .avatar {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    margin: 10px
}

.m-mv .m-userinfo .avatar .image {
    display: inline-block;
    width: 100%;
    height: 100%;
    border-radius: 50%
}

.m-mv .m-userinfo .username {
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    color: #333;
    font-size: 14px;
    line-height: 21px
}

.m-mv .m-userinfo .follow {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 56px;
    height: 22px;
    margin-right: 10px;
    padding-top: 1px;
    box-sizing: border-box;
    color: #d33a31;
    font-size: 11px;
    line-height: 16px
}

.m-mv .m-userinfo .follow:after {
    border-radius: 100px;
    border-color: rgba(0, 0, 0, .15)
}

.m-mv .m-userinfo .text {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px
}

.m-mv-video .u-song {
    height: 55px
}

.m-program {
    position: relative;
    min-height: 100%;
    box-sizing: border-box;
    overflow: hidden
}

.m-program .bg.z-dis {
    opacity: .5
}

.m-program .bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-size: auto 100%;
    background-position: 50%;
    opacity: 1;
    transition: opacity .3s;
    transform: scale(1.5);
    transform-origin: center;
    filter: blur(10px)
}

.m-program .bg:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5)
}

.m-program .clickcover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 82px;
    z-index: 3;
    background: transparent
}

.m-program .m-content.z-hide,
.m-program .m-subbar.z-hide {
    display: none
}

.m-program .u-ft {
    bottom: 20px;
    z-index: 2
}

.m-subbar {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    height: 50px;
    padding: 10px 11px 10px 15px;
    box-sizing: border-box;
    border-bottom: 1px solid hsla(0, 0%, 100%, .1)
}

.m-subbar .urinfo {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 30px;
    height: 30px
}

.m-subbar .urinfo .ava {
    width: 30px;
    height: 30px;
    background: url() 50%/17px auto no-repeat #e1e3e4
}

.m-subbar .info {
    -ms-flex: 1;
    flex: 1;
    width: 1%;
    height: 30px;
    margin-left: 8px;
    margin-right: 20px
}

.m-subbar .info .djname {
    margin-top: 1px;
    font-size: 15px;
    color: #fff;
    font-weight: 400;
    line-height: 16px
}

.m-subbar .info .favcnt {
    margin-top: 3px;
    font-size: 10px;
    color: hsla(0, 0%, 100%, .7);
    line-height: 1
}

.m-subbar .info .viptag {
    display: inline-block;
    width: 40px;
    height: 13px;
    margin-top: -4px;
    margin-right: 2px;
    font-size: 9px;
    line-height: 14px;
    text-align: center;
    vertical-align: middle
}

.m-subbar .info .viptag:after {
    border-color: #fff
}

.m-subbar .btn {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    position: relative;
    z-index: 200;
    height: 26px;
    line-height: 1;
    box-sizing: border-box;
    border: 1px solid hsla(0, 0%, 100%, .7);
    border-radius: 9999px;
    margin-top: 3px;
    font-size: 12px;
    color: #fff
}

.m-subbar .unlock {
    width: 80px;
    line-height: 24px;
    text-align: center
}

.m-subbar .subbtn {
    padding: 6px 12px 0 26px;
    background-image: url();
    background-size: 13px;
    background-position: 8px;
    background-repeat: no-repeat
}

.m-subbar .hasbuy {
    padding: 6px 12px 0;
    opacity: .4
}

.m-subbar .buy {
    position: relative;
    z-index: 200;
    float: right;
    height: 26px;
    line-height: 1;
    padding: 6px 12px 0;
    box-sizing: border-box;
    border: 1px solid hsla(0, 0%, 100%, .7);
    border-radius: 9999px;
    margin-top: 3px;
    font-size: 12px;
    color: #fff
}

.m-subbar .buy .origin {
    color: hsla(0, 0%, 100%, .6);
    font-size: 10px
}

.m-subbar .buy .origin>i {
    text-decoration: line-through
}

.m-subbar .buy .u-svg-white {
    margin-top: -2px;
    margin-left: 7px
}

.unlock-wrapper .u-ft .footer-wrap .u-btn-hollow {
    display: none
}

@media screen and (max-width:359px) {
    .m-subbar {
        height: 43px;
        padding: 6px 10px
    }
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-subbar .subbtn {
        background-image: url()
    }
}

@media screen and (orientation:landscape) {
    .m-program .u-ft {
        position: absolute
    }
    .m-program .clickcover {
        position: static;
        padding-bottom: 75px
    }
    .m-program .clickcover .m-talkscroll {
        bottom: 82px
    }
}

@media screen and (max-height:480px) {
    .m-program .u-ft {
        position: absolute
    }
    .m-program .clickcover {
        position: static;
        padding-bottom: 75px
    }
    .m-program .clickcover .m-talkscroll {
        bottom: 82px
    }
}

@media screen and (device-width:375px) and (device-height:812px) {
    .m-program .clickcover {
        margin-bottom: constant(safe-area-inset-bottom);
        margin-bottom: env(safe-area-inset-bottom)
    }
    .m-program .u-ft {
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: env(safe-area-inset-bottom)
    }
}

.m-program .g-wrap {
    position: relative;
    margin-top: 41px;
    background-color: transparent
}

.m-program .scale {
    background-image: url();
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: 50%
}

.m-program .opac {
    opacity: 1;
    transition: opaocity .2s
}

.m-program .disc {
    width: 304px;
    height: 304px;
    margin: 0 auto;
    position: relative
}

.m-program .disc .btn {
    width: 56px;
    height: 56px;
    background-image: none;
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 56px auto
}

.m-program .z-stop .btn {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    transform: translate(-50%, -50%);
    background-image: url()
}

.m-program .z-stop .turn .img,
.m-program .z-stop .turn:after {
    animation: none
}

.m-program .turn {
    width: 100%;
    height: 100%
}

.m-program .turn:after,
.m-program .turn:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.m-program .turn:before {
    background-image: url(share_dj_disc-ip6@2x.png);
    background-size: 304px auto
}

.m-program .turn:after {
    z-index: 3;
    width: 100%;
    height: 100%
}

.m-program .turn .img {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 296px;
    height: 296px;
    margin: -148px 0 0 -148px;
    z-index: 2;
    border-radius: 9999px
}

.m-program .turn .img img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 9999px
}

.m-program .turn .img,
.m-program .turn:after {
    animation: turning 20s infinite linear
}

@keyframes turning {
    0% {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn)
    }
}

.m-djinfo {
    text-align: center;
    margin-top: 23px
}

.m-djinfo .djtt {
    padding: 0 20px;
    line-height: 1.2;
    color: #fefefe;
    font-size: 18px;
    word-wrap: break-word
}

.m-djinfo .djdtl {
    margin-top: 12px;
    line-height: 16px;
    padding: 0 20px;
    color: hsla(0, 0%, 100%, .6);
    font-size: 15px
}

.m-djinfo .djdtl .num {
    margin-left: 15px
}

@media screen and (max-width:359px) {
    .m-program .scale {
        background-image: url()
    }
    .m-program .disc {
        top: 0;
        width: 242px;
        height: 242px
    }
    .m-program .disc .btn {
        width: 50px;
        height: 50px;
        background-size: 50px auto
    }
    .m-program .disc.z-stop .btn {
        background-image: url()
    }
    .m-program .turn:before {
        background: url(share_dj_disc@2x.png);
        background-size: 242px auto
    }
    .m-program .turn .img {
        width: 234px;
        height: 234px;
        margin: -117px 0 0 -117px
    }
    .m-djinfo .djtt {
        font-size: 15px
    }
    .m-djinfo .djdtl {
        font-size: 13px
    }
}

@media screen and (min-width:414px) {
    .m-program .disc {
        width: 336px;
        height: 336px
    }
    .m-program .disc .btn {
        width: 65px;
        height: 65px;
        background-size: 65px auto
    }
    .m-program .disc.z-stop .btn {
        background-image: url(share_program_icn_play@3x.png)
    }
    .m-program .turn:before {
        background-image: url(share_dj_disc@3x.png);
        background-size: 336px auto
    }
    .m-program .turn .img {
        width: 326px;
        height: 326px;
        margin: -163px 0 0 -163px
    }
    .m-djinfo .djtt {
        font-size: 20px
    }
    .m-djinfo .djdtl {
        font-size: 16px
    }
}

@media screen and (min-width:768px) {
    .m-program .g-wrap {
        margin-top: 100px
    }
    .m-program .scale {
        background-image: url(share_program_bg_scale-ipad@2x.png)
    }
    .m-program .disc {
        width: 421px;
        height: 421px
    }
    .m-program .disc .btn {
        width: 82px;
        height: 82px;
        background-size: 82px auto
    }
    .m-program .disc.z-stop .btn {
        background-image: url()
    }
    .m-program .turn:before {
        background-image: url(share_dj_disc-ipad@2x.png);
        background-size: 421px
    }
    .m-program .turn .img {
        width: 408px;
        height: 408px;
        margin: -204px 0 0 -204px
    }
    .m-djinfo {
        margin-top: 50px
    }
}

@media screen and (max-height:550px) {
    .m-program .g-wrap {
        margin-top: 25px
    }
    .m-program .u-ft {
        bottom: 15px
    }
    .m-djinfo {
        margin-top: 15px
    }
    .m-djinfo .djdtl {
        margin-top: 8px
    }
}

@media screen and (max-height:520px) {
    .m-program .g-wrap {
        margin-top: 20px
    }
    .m-program .u-ft {
        bottom: 15px
    }
    .m-djinfo {
        margin-top: 12px
    }
    .m-djinfo .djdtl {
        margin-top: 6px
    }
}

.m-program .m-talkscroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.m-program .m-talk-imm {
    width: 100%;
    height: 100%
}

.m-empty,
.m-loading {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 82px;
    z-index: 10;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.m-empty .cmload,
.m-loading .cmload {
    background: url() top no-repeat;
    background-size: 20px;
    padding-top: 40px;
    text-align: center;
    color: #888
}

.m-empty .cmemp,
.m-loading .cmemp {
    text-align: center;
    line-height: 40px;
    color: #fff;
    font-size: 16px
}

.m-empty .cmemt,
.m-loading .cmemt {
    color: #999
}

.m-artist {
    background-color: #fbfcfd;
    min-height: 100%;
    box-sizing: border-box
}

.art_head {
    position: relative;
    padding-bottom: 68%;
    overflow: hidden
}

.art_head .u-img {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1
}

.art_head .arhd_name {
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 5px;
    z-index: 3;
    color: #fff;
    font-size: 17px
}

.art_head:after {
    content: " ";
    position: absolute;
    z-index: 2;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100px;
    background: url() 0 0 repeat-x;
    background-size: contain
}

.art_intro {
    padding: 10px 15px 0
}

.m-dynamic {
    background-color: #fbfcfd;
    min-height: 100%
}

.m-dynamic .m-timeline-detail {
    padding: 1px
}

.m-dynamic .m-timeline-detail .link.u-link {
    color: #507daf
}

.m-dynamic .m-talkc {
    position: relative
}

.m-dynamic .m-talkc-empty {
    overflow: hidden
}

.m-dynamic .m-talkc-empty .title {
    height: 25px;
    padding-left: 10px;
    color: #666;
    line-height: 28px;
    font-size: 12px;
    background-color: rgba(0, 0, 0, .05)
}

.m-dynamic .m-talkc-empty .nocmt {
    margin: 43px 0 20px;
    text-align: center;
    color: #888;
    font-size: 14px
}

.m-dynamic .nores {
    background-color: rgba(0, 0, 0, .04)
}

.m-dynamic .srcempty {
    padding: 10px
}

.m-dynamic .srcempty .del {
    margin: 3px 0;
    color: #999;
    font-size: 15px;
    line-height: 22px
}

.m-dynamic .reshare .nores {
    background-color: #fbfcfd
}

.m-dynamic .reshare .srcempty {
    padding: 2px
}

.m-dymitem {
    position: relative;
    min-height: 40px;
    padding: 0 10px 20px;
    margin-top: 15px;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-word;
    cursor: pointer
}

.m-dymitem:after {
    border-bottom: 1px solid #e1e2e3
}

.m-dymitem .f-hide,
.m-dymitem:last-child:after {
    display: none
}

.m-dymitem .f-fs1 {
    font-size: 14px
}

.m-dymitem .s-fc6 {
    color: #507daf
}

.m-dymitem .s-fc7 {
    color: #0c73c2
}

.m-dymitem .u-icon {
    display: inline-block;
    position: absolute;
    background: url(sprite_2x.png) no-repeat;
    background-size: 150px auto
}

.m-dymitem .u-icon-dot {
    width: 4px;
    height: 4px;
    background-position: -40px -60px
}

.m-dymitem .u-icon-pay {
    background: url(sprite_2x.png) -60px -78px no-repeat;
    background-size: 150px auto;
    display: inline-block;
    position: absolute;
    width: 100%;
    height: 100%
}

.m-dymitem .u-icon-play {
    width: 18px;
    height: 18px;
    background-position: -65px -25px
}

.m-dymitem .u-icon-crown {
    width: 20px;
    height: 20px;
    background-position: -95px 0
}

.m-dymitem .u-icon-thumb {
    width: 15px;
    height: 15px;
    background-position: 0 0
}

.m-dymitem .u-icon-thumb-up {
    width: 15px;
    height: 15px;
    background-position: -25px 0
}

.m-dymitem .u-icon-comment {
    width: 15px;
    height: 15px;
    background-position: -50px 0
}

.m-dymitem .u-icon-repost {
    width: 15px;
    height: 15px;
    background-position: -75px 0
}

.m-dymitem .u-icon-ar {
    width: 6px;
    height: 10px;
    background-position: -25px -60px
}

.m-dymitem .u-icon-mvplay,
.m-dymitem .u-icon-replay,
.m-dymitem .u-icon-vdplay {
    width: 42px;
    height: 42px;
    background-position: 0 -120px
}

.m-dymitem .u-icon-vdplay {
    background-position: -50px -120px
}

.m-dymitem .u-icon-replay {
    background-position: -100px -120px
}

.m-dymitem .u-icon-clock {
    width: 13px;
    height: 13px;
    background-position: -95px -50px
}

.m-dymitem .u-icon-play,
.m-dymitem .u-icon-vdplay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.m-dymitem .u-icon-crown {
    position: absolute;
    top: 0;
    left: 0
}

.m-dymitem .cmt_emoji,
.m-dymitem .cmt_text,
.m-dymitem .msg a,
.m-dymitem .msg span {
    vertical-align: middle
}

.m-dymitem .reshare .cmt_emoji {
    margin-top: -2px
}

.m-dymitem .u-authicn-16 {
    position: absolute;
    bottom: 0;
    right: -5px;
    z-index: 10
}

.m-dymitem .face {
    position: absolute;
    top: 0;
    left: 10px;
    width: 40px;
    background-size: 40px auto
}

.m-dymitem .u-face:after {
    border: 1px solid rgba(0, 0, 0, .05)
}

.m-dymitem .userinfo {
    height: 40px
}

.m-dymitem .userinfo .desc {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    height: 35px;
    padding-right: 50px;
    box-sizing: border-box
}

.m-dymitem .userinfo .title {
    display: -ms-flexbox;
    display: flex;
    line-height: 24px;
    font-size: 15px;
    zoom: 1
}

.m-dymitem .userinfo .name {
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    display: inline-block;
    color: #507daf
}

.m-dymitem .userinfo .name.z-noflex {
    max-width: 130px
}

.m-dymitem .userinfo .type {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: inline-block;
    width: 120px;
    color: #666
}

.m-dymitem .userinfo .time {
    position: relative;
    color: #999;
    line-height: 12px;
    font-size: 11px
}

.m-dymitem .userinfo .sconfirm {
    position: absolute;
    top: -6px;
    right: 0;
    width: 64px;
    height: 35px;
    font-size: 15px;
    color: #e03f40;
    text-align: center;
    line-height: 35px
}

.m-dymitem .msg {
    margin-top: 10px;
    margin-bottom: 6px;
    font-size: 16px;
    line-height: 24px
}

.m-dymitem .msg.msg-ask {
    font-size: 15px
}

.m-dymitem .msg .s-fc3 {
    color: #666
}

.m-dymitem .msg>img {
    vertical-align: bottom
}

.m-dymitem .msg+.res {
    margin-top: 4px
}

.m-dymitem .like-length-limit {
    position: absolute;
    width: 93%;
    height: 30px;
    padding-right: 100px;
    box-sizing: border-box;
    overflow: hidden
}

.m-dymitem .m-like {
    position: relative;
    padding-top: 15px;
    line-height: 30px
}

.m-dymitem .m-like .user {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin-right: 8px
}

.m-dymitem .m-like .user .u-img {
    vertical-align: initial
}

.m-dymitem .m-like .txt {
    display: inline-block;
    height: 30px;
    vertical-align: middle;
    font-size: 12px
}

.m-dymitem .m-like .btn {
    position: absolute;
    right: 0;
    height: 25px;
    box-sizing: border-box;
    line-height: 21px;
    margin-top: 2px;
    padding: 0 9px;
    border-radius: 23px;
    background: hsla(0, 0%, 100%, .8);
    border: 1px solid #d3d4da;
    color: #666
}

.m-dymitem .m-like .btn:active {
    background-color: #d3d4da
}

.m-dymitem .m-like .btn .za {
    float: left;
    width: 16px;
    height: 15px;
    margin: 3px 4px 0 0;
    background: url() 100% 100% no-repeat;
    background-size: 16px 15px
}

.m-dymitem .m-like .btn .za-1 {
    background-image: url()
}

.m-dymitem .m-like .za-word {
    display: inline-block;
    margin-top: 1px;
    font-size: 12px;
    color: #333
}

.m-dymitem .m-like .lza-word {
    font-size: 15px;
    color: #999
}

.m-dymitem .reshare {
    padding: 8px;
    margin-top: 6px;
    background-color: rgba(0, 0, 0, .04)
}

.m-dymitem .reshare .res {
    margin: 5px 0 0;
    background: #fff
}

.m-dymitem .reshare .msg {
    margin: 2px 0 5px;
    color: #666;
    line-height: 24px;
    font-size: 15px
}

.m-dymitem .reshare .pics,
.m-dymitem .reshare .video {
    margin-top: 0
}

.m-dymitem .s-fc8 {
    color: #888
}

.m-dymitem-ask .askarea {
    padding-top: 10px;
    padding-bottom: 5px
}

.m-dymitem-ask .askarea .ask {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #d33a31;
    color: #fbfcfd
}

.m-dymitem-ask .askarea .ask svg {
    display: block
}

.m-dymitem-ask .askarea .msg-ask {
    margin-top: 0;
    padding-top: 9px;
    font-size: 15px
}

.m-dymitem-ask .askarea .askvideo {
    padding-left: 50px
}

.m-dymitem-ask .askarea .askvideo .video {
    width: 49%;
    padding-top: 28.12%
}

.m-dymitem-ask .askarea .askvideo .times {
    visibility: hidden
}

.m-timeline .ops {
    position: relative;
    margin-top: 17px
}

.m-timeline .ops li.opitem {
    position: relative;
    display: inline-block;
    width: 75px;
    height: 17px;
    margin-right: 15px;
    line-height: 17px;
    color: #999;
    font-size: 12px
}

.m-timeline .ops a {
    color: #999
}

.m-timeline .ops .u-icon {
    position: static;
    margin-right: 4px;
    top: 3px;
    vertical-align: middle
}

.m-timeline .ops .num {
    display: inline-block;
    margin-top: 2px;
    vertical-align: middle
}

.m-timeline-detail .m-dymitem .content {
    padding-left: 0
}

.m-timeline-detail .m-dymitem .userinfo {
    padding-left: 50px
}

.m-timeline-detail .m-dymitem .face .ava-icon {
    width: 16px;
    height: 16px;
    background-size: 48px auto;
    background-image: url(authicn_16_2x.png)
}

.m-timeline-detail .m-dymitem .face .ava-icon-v {
    background-position: 0 0
}

.m-timeline-detail .m-dymitem .face .ava-icon-yyr {
    background-position: -16px 0
}

.m-timeline-detail .m-dymitem .face .ava-icon-daren {
    background-position: -32px 0
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-dymitem .u-icon {
        background-image: url(sprite_3x.png)
    }
    .m-dymitem .u-icon-pay {
        background: url(sprite_3x.png) -70px -80px no-repeat;
        background-size: 150px auto
    }
    .m-dymitem .m-like .btn .za {
        background-image: url()
    }
    .m-dymitem .m-like .btn .za-1 {
        background-image: url()
    }
    .m-dymitem .res .cover.u-cover-alb40:before {
        background-image: url()
    }
    .m-timeline-detail .m-dymitem .face .ava-icon {
        background-image: url(authicn_16_3x.png)
    }
}

@media screen and (max-width:320px) {
    .m-timeline .ops li.opitem {
        margin-right: 5px
    }
}

.m-dymitem .btntag {
    position: absolute;
    width: 33px;
    height: 10px;
    padding: 3px 0;
    right: 6px;
    bottom: 6px;
    text-align: center;
    color: #fff;
    font-size: 10px;
    line-height: 10px
}

.m-dymitem .btntag em {
    position: relative
}

.m-dymitem .btntag svg {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    fill: hsla(0, 0%, 100%, .6)
}

.m-dymitem .res {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    margin-top: 4px;
    padding: 8px;
    overflow: hidden;
    background-color: rgba(0, 0, 0, .05)
}

.m-dymitem .res .cover {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    margin-right: 8px
}

.m-dymitem .res .cover.u-cover-alb40 {
    margin-right: 15px
}

.m-dymitem .res .cover.u-cover-alb40:before {
    content: "";
    position: absolute;
    top: 0;
    right: -7px;
    width: 7px;
    height: 40px;
    background-image: url();
    background-size: 7px auto
}

.m-dymitem .res .cnt {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    width: 1%
}

.m-dymitem .res .cnt .title {
    line-height: 21px;
    font-size: 15px
}

.m-dymitem .res .cnt .subtitle {
    line-height: 19px;
    font-size: 12px;
    color: #666
}

.m-dymitem .res .cnt-artist .title {
    line-height: 40px
}

.m-dymitem .res .tag {
    display: inline-block;
    vertical-align: middle;
    margin: -3px 3px 0 0;
    padding: 1px 2px 0;
    height: 12px;
    box-sizing: border-box;
    line-height: 12px;
    color: #e03f40;
    font-size: 9px
}

.m-dymitem .res .tag:after {
    border-color: #e03f40
}

.m-dymitem .res-concert .cover {
    height: 54px
}

.m-dymitem .res-concert .cover .cnt .title {
    line-height: 19px;
    font-size: 14px
}

.m-dymitem .res-concert .cover .cnt .subtitle {
    line-height: 19px;
    color: #999
}

.m-dymitem .topic {
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.m-dymitem .topic img {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 105px;
    height: 70px;
    margin-left: 8px;
    background-color: #e1e3e4
}

.m-dymitem .topic article {
    -ms-flex: 1 0 auto;
    flex: 1 0 auto;
    width: 1%
}

.m-dymitem .topic h4 {
    margin: 4px 0 5px;
    line-height: 21px;
    font-size: 16px
}

.m-dymitem .topic p {
    line-height: 19px;
    font-size: 13px;
    color: #999
}

.m-dymitem .topic .tag {
    float: none;
    vertical-align: middle
}

.m-dymitem .cmt {
    position: relative;
    margin-top: 15px;
    padding: 26px 14px 14px;
    border: 1px solid rgba(0, 0, 0, .1)
}

.m-dymitem .cmt article {
    line-height: 23px
}

.m-dymitem .cmt .res {
    margin-top: 26px;
    padding: 0;
    background: none
}

.m-dymitem .cmt .res .cover {
    width: 30px;
    height: 30px
}

.m-dymitem .cmt .res .title {
    line-height: 30px;
    color: #888;
    font-size: 12px
}

.m-dymitem .cmt .content {
    font-size: 15px
}

.m-dymitem .cmt .friend {
    color: #507daf;
    vertical-align: middle
}

.m-dymitem .cmt .quo {
    position: absolute;
    top: -7px;
    right: 5px;
    width: 18px;
    height: 15px;
    padding: 0 10px;
    color: rgba(0, 0, 0, .1);
    background-color: #fbfcfd
}

.m-dymitem .cmt .quo svg {
    fill: currentColor
}

.m-dymitem .cmt .inner {
    position: relative;
    margin-top: 7px;
    padding-left: 9px;
    line-height: 22px
}

.m-dymitem .cmt .inner:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    box-sizing: border-box;
    border: 4px solid #fbfcfd;
    border-width: 4px 0;
    background: rgba(0, 0, 0, .1)
}

.m-dymitem .cmt .nores-cmt {
    margin-top: 10px
}

.m-dymitem .cmt .nores-cmt .del {
    font-size: 14px
}

.m-dymitem .cmt_express {
    width: 70px;
    height: 70px;
    margin-top: 3px
}

.m-dymitem .cmt_express_img {
    display: inline-block;
    width: 100%;
    height: 100%
}

.m-dymitem .reason {
    margin: 6px 0 0
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-dymitem .res .u-cover-alb40:before {
        background-image: url()
    }
}

.m-dymitem .video {
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding-top: 56.25%
}

.m-dymitem .video figure {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-position: 50%;
    background-size: cover
}

.m-dymitem .video img,
.m-dymitem .video video {
    display: block;
    height: 100%;
    width: 100%;
    max-height: 100%;
    max-width: 100%
}

.m-dymitem .video .z-hide {
    display: none
}

.m-dymitem .video .z-noplay {
    width: 1px;
    height: 1px
}

.m-dymitem .video:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    z-index: 2;
    pointer-events: none
}

.m-dymitem .video .u-icon {
    z-index: 5
}

.m-dymitem .video .poster {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent no-repeat 50%;
    background-size: contain
}

.m-dymitem .video figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 4;
    padding: 20px 6px 6px;
    background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .5));
    color: #fff
}

.m-dymitem .video .times {
    float: left;
    font-size: 12px
}

.m-dymitem .video .times .icn {
    width: 8px;
    height: 10px;
    fill: #fff;
    margin: 2px 4px 0 0
}

.m-dymitem .video .plytime {
    float: right;
    font-size: 12px
}

.m-dymitem .video .plytime .jump {
    display: inline-block;
    vertical-align: middle;
    margin: -1px 4px 0 0;
    width: 12px;
    height: 12px;
    background: url();
    background-size: auto 12px
}

.m-dymitem .video .title {
    font-size: 15px
}

.m-dymitem .video .subtitle {
    font-size: 12px
}

.m-dymitem .video-mv figcaption {
    padding-right: 47px
}

.m-dymitem .video-mv img {
    width: 100%;
    height: 100%
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .m-dymitem .video .plytime .jump {
        background-image: url()
    }
}

.m-dymitem .piclist {
    display: -ms-flexbox;
    display: flex;
    width: 100%
}

.m-dymitem .piclist li {
    position: relative;
    overflow: hidden;
    margin-top: 2px;
    margin-left: 2px;
    background: #e2e3e5;
    line-height: 0
}

.m-dymitem .piclist li figure {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    padding-top: 100%
}

.m-dymitem .piclist .image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover
}

.m-dymitem .piclist-1 .image {
    position: relative
}

.m-dymitem .piclist-1 li.type1 .image {
    max-width: 170px;
    max-height: 170px
}

.m-dymitem .piclist-1 li.type2 .image {
    width: auto;
    height: auto;
    min-height: 171px;
    max-width: 100%
}

.m-dymitem .piclist-1 li.type3 .image {
    width: auto;
    height: auto;
    min-width: 171px;
    max-height: 280px
}

.m-dymitem .piclist-2,
.m-dymitem .piclist-3,
.m-dymitem .piclist-4,
.m-dymitem .piclist-5,
.m-dymitem .piclist-6,
.m-dymitem .piclist-7,
.m-dymitem .piclist-8,
.m-dymitem .piclist-9 {
    display: block
}

.m-dymitem .piclist-2 li,
.m-dymitem .piclist-3 li,
.m-dymitem .piclist-4 li,
.m-dymitem .piclist-5 li,
.m-dymitem .piclist-6 li,
.m-dymitem .piclist-7 li,
.m-dymitem .piclist-8 li,
.m-dymitem .piclist-9 li {
    -ms-flex: 1;
    flex: 1;
    width: 1%
}

.m-dymitem .piclist .firstline,
.m-dymitem .piclist .secondline,
.m-dymitem .piclist .thirdline {
    display: -ms-flexbox;
    display: flex
}

.m-dymitem .piclist-4 {
    width: 66%
}

.m-dymitem .piclist-4 li {
    margin-left: 3px
}

.m-dymitem .firstline li:first-child,
.m-dymitem .secondline li:first-child,
.m-dymitem .thirdline li:first-child {
    margin-left: 0
}

.g-piccover {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 20;
    overflow: hidden;
    background-color: #000;
    -ms-touch-action: none;
    touch-action: none
}

.g-piccover .m-picbox,
.g-piccover .m-picswipe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 21;
    overflow: hidden
}

.g-piccover .m-picbox {
    display: none;
    transform: translate(0)
}

.g-piccover .m-picbox.z-move {
    transition: transform .5s ease
}

.g-piccover .m-picbox.z-active,
.g-piccover .m-picbox.z-next,
.g-piccover .m-picbox.z-prev {
    display: block
}

.g-piccover .m-picbox.z-next {
    transform: translate(100%)
}

.g-piccover .m-picbox.z-next-vertical {
    transform: translateY(100%)
}

.g-piccover .m-picbox.z-prev {
    transform: translate(-100%)
}

.g-piccover .m-picbox.z-prev-vertical {
    transform: translateY(-100%)
}

.g-piccover .m-picbox .scalebox {
    position: absolute;
    width: 100%;
    height: 100%
}

.g-piccover .m-picbox .pic {
    position: absolute;
    top: 50%;
    left: 50%
}

.g-piccover .m-picbox .pic.z-move {
    transition: all .5s ease
}

.m-picindex {
    position: fixed;
    bottom: 20px;
    left: 50%;
    z-index: 999;
    transform: translateX(-50%);
    color: hsla(0, 0%, 100%, .9)
}

.m-activity {
    min-height: 100%;
    background-color: #fbfcfd
}

.m-activity .nores {
    background-color: rgba(0, 0, 0, .04)
}

.m-activity .srcempty {
    padding: 10px
}

.m-activity .srcempty .del {
    margin: 3px 0;
    color: #999;
    font-size: 15px;
    line-height: 22px
}

.m-activity .reshare .nores {
    background-color: #fbfcfd
}

.m-activity .reshare .srcempty {
    padding: 2px
}

.m-activity .m-timeline .m-eventlist-meeting .m-dymitem {
    padding-bottom: 27px
}

.m-activity .m-timeline .m-eventlist-meeting .m-dymitem.m-dymitem-ask {
    padding-bottom: 5px
}

.m-activity .m-timeline .m-eventlist-meeting .m-dymitem-ask+.m-dymitem {
    margin-top: -12px
}

.m-activity .m-timeline {
    position: relative;
    min-height: 200px
}

.m-activity .m-timeline .u-title {
    padding: 0 10px;
    height: 23px;
    line-height: 24px;
    font-size: 12px;
    color: #666;
    background-color: #eeeff0
}

.m-activity .m-timeline .m-dymitem {
    position: relative;
    min-height: 40px;
    padding: 20px 10px;
    margin-top: 0;
    line-height: 1.3;
    word-wrap: break-word;
    word-break: break-word
}

.m-activity .m-timeline .m-dymitem:after {
    border-bottom: 1px solid #e1e2e3
}

.m-activity .m-timeline .m-dymitem .askarea>.content,
.m-activity .m-timeline .m-dymitem>.content {
    padding-left: 50px
}

.m-activity .m-timeline .m-dymitem .userinfo .sconfirm {
    top: 14px
}

.m-activity .m-timeline .m-seemore {
    width: 100%;
    padding: 16px 0;
    text-align: center
}

.m-activity .m-timeline .m-seemore:after {
    border-top: 1px solid #e1e2e3
}

.m-activity .m-timeline .m-seemore .btn {
    color: #507daf;
    font-size: 14px
}

.m-activity .m-timeline .m-seemore .u-icon-ar {
    display: inline-block;
    width: 6px;
    height: 10px;
    background: url(sprite_2x-bak.png) no-repeat;
    background-size: 150px auto;
    background-position: -25px -60px;
    margin-left: 6px
}

.m-activity .m-timeline .m-eventlist .m-dymitem .face {
    top: 20px
}

.m-activity .m-timeline .m-eventlist-meeting .m-dymitem .face {
    top: 25px
}

.m-activity .m-timeline .m-eventlist-meeting .m-dymitem .askarea .face {
    top: 30px
}

.m-activity .m-timeline .m-dymitem-ask .piclist {
    padding-left: 50px;
    box-sizing: border-box
}

.m-activity .m-timeline .m-dymitem-ask .piclist .secondline,
.m-activity .m-timeline .m-dymitem-ask .piclist .thirdline {
    display: none
}

.m-activity .m-timeline .m-dymitem-ask .piclist .picOpct {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .3);
    text-align: center
}

.m-activity .m-timeline .m-dymitem-ask .piclist .picNum {
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    color: #fff
}

.m-activity .m-timeline .m-dymitem-ask .piclist-1 li,
.m-activity .m-timeline .m-dymitem-ask .piclist-2 li,
.m-activity .m-timeline .m-dymitem-ask .piclist-3 li {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 75px;
    height: 75px
}

.m-activity .m-timeline .m-dymitem-ask .piclist-1 .image,
.m-activity .m-timeline .m-dymitem-ask .piclist-2 .image,
.m-activity .m-timeline .m-dymitem-ask .piclist-3 .image {
    max-width: 75px;
    min-width: 75px;
    max-height: 75px
}

.m-activity .m-timeline .m-dymitem-ask .piclist-4 {
    width: 100%
}

.m-acthead .bgpic {
    position: relative;
    height: 0;
    padding-bottom: 63.44%;
    background-position: 50%;
    background-size: cover
}

.m-acthead .bgpic:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, .3)
}

.m-acthead .cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.m-acthead .in {
    display: block;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    transition: opacity .15s;
    text-align: center
}

.m-acthead .wrap {
    display: inline-block
}

.m-acthead .title {
    min-width: 114px;
    max-height: 90px;
    padding: 10px 8px 6px;
    border-top: 2px solid hsla(0, 0%, 100%, .2);
    font-size: 20px;
    line-height: 30px;
    color: #fff;
    word-wrap: break-word;
    word-break: break-all;
    font-weight: 700
}

.m-acthead .numwrap {
    overflow: hidden;
    font-size: 12px
}

.m-acthead .num {
    position: relative;
    display: inline-block;
    padding: 0 8px;
    font-size: 12px;
    color: #fff
}

.m-acthead .num:after,
.m-acthead .num:before {
    content: "";
    position: absolute;
    top: 6px;
    width: 1000px;
    height: 2px;
    background-color: hsla(0, 0%, 100%, .2);
    transform: rotateY(180deg)
}

.m-acthead .num:before {
    left: 0;
    transform-origin: left center
}

.m-acthead .num:after {
    right: 0;
    transform-origin: right center
}

.m-acthead .timewrap {
    margin: 0 10px;
    padding: 15px 0
}

.m-acthead .time {
    margin-right: 84px;
    height: 25px;
    line-height: 25px;
    font-size: 14px;
    color: #333
}

.m-acthead .clock {
    position: absolute;
    top: 15px;
    right: 0;
    display: block;
    width: 84px;
    height: 25px;
    line-height: 25px;
    font-size: 13px;
    color: #d33a31;
    text-align: center
}

.m-acthead .clock:hover {
    color: #d33a31
}

.m-acthead .clock:after {
    border: 1px solid #d33a31;
    border-radius: 4px
}

.m-acthead .u-icon-clock {
    position: relative;
    margin-right: 3px;
    top: 1px
}

.m-acthead .timewrap:after {
    border-bottom: 1px solid rgba(0, 0, 0, .1)
}

.m-acthead .rules {
    margin: 12px 10px 20px
}

.m-acthead .rules-1 {
    padding: 10px 10px 16px
}

.m-acthead .rules li {
    position: relative;
    margin-bottom: 6px;
    padding-left: 11px;
    line-height: 20px;
    font-size: 13px;
    color: #333
}

.m-acthead .u-icon {
    display: inline-block;
    position: absolute;
    background: url(sprite_2x.png) no-repeat;
    background-size: 150px auto
}

.m-acthead .u-icon-dot {
    top: 8px;
    left: 0;
    width: 4px;
    height: 4px;
    background-position: -40px -60px
}

.m-store {
    position: relative;
    height: 60px;
    margin: 20px 10px
}

.m-acthead .rules~.m-store {
    margin-top: 17px
}

.m-store:after {
    border: 1px solid rgba(0, 0, 0, .13)
}

.m-store .pic {
    float: left;
    width: 60px;
    height: 60px;
    background: #e1e3e4
}

.m-store .pic img {
    width: 100%;
    height: 100%
}

.m-store .cnt {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-direction: column;
    flex-direction: column;
    height: 100%;
    margin: 0 28px 0 70px;
    background: #fff;
    font-size: 14px;
    line-height: 20px
}

.m-store .arr {
    width: 7px;
    height: 13px;
    fill: #ccc;
    right: 10px
}

.m-contribution {
    padding-left: 15px;
    padding-right: 15px
}

.m-contribution .f-mt20 {
    margin-top: 10px
}

.m-contribution .f-pb10 {
    padding-bottom: 5px
}

.m-contribution .f-pt30 {
    padding-top: 15px
}

.m-contribution .f-pb30 {
    padding-bottom: 15px
}

.m-contribution .f-pt60 {
    padding-top: 30px
}

.m-contribution .f-flex {
    display: -ms-flexbox;
    display: flex
}

.m-contribution .f-flex-cv,
.m-contribution .f-flex-cvh {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.m-contribution .f-flex-cvh {
    -ms-flex-pack: center;
    justify-content: center
}

.m-contribution .f-flex1 {
    -ms-flex: 1;
    flex: 1
}

.m-contribution .f-flex-sb {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.m-contribution .f-flex-wrap {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.m-contribution .f-min-w0 {
    min-width: 0
}

.m-contribution-pb-lg {
    padding-bottom: 90px
}

.m-contribution-pb-md {
    padding-bottom: 70px
}

.m-contribution .m-cover {
    width: 26.66666666vw;
    height: 26.66666666vw;
    border-radius: 3px;
    margin-right: 15px
}

.m-contribution h1 {
    font-size: 14px;
    color: #333
}

.m-contribution .u-expire-text {
    font-size: 12px;
    padding-top: 10px;
    color: #888
}

.m-contribution h3 {
    font-size: 14px;
    color: #333
}

.m-contribution .u-progress-txt {
    padding-left: 14px;
    font-size: 12px;
    color: #888
}

.m-contribution .m-progress {
    position: relative;
    height: 8px;
    border-radius: 50px;
    background: #e7eaf3;
    overflow: hidden
}

.m-contribution .m-progress .u-progress-done {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: #ea524e
}

.m-contribution .m-reward img {
    width: 20px;
    margin-right: 10px
}

.m-contribution .m-reward p {
    font-size: 12px;
    color: #333;
    margin-right: 18px
}

.m-contribution .m-relative-topic {
    position: relative;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    background: #f1f1f1;
    border-radius: 8px 8px 0 8px;
    font-size: 12px;
    color: #333;
    font-weight: 700;
    padding: 10px
}

.m-contribution .m-relative-topic:after {
    content: "";
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateX(100%);
    width: 10px;
    height: 10px;
    background: url();
    background-size: cover
}

.m-contribution .m-relative-song {
    background: #f5f5f5;
    border-radius: 3px;
    padding: 10px
}

.m-contribution .m-relative-song img {
    width: 50px;
    height: 50px;
    border-radius: 3px;
    margin-right: 13px
}

.m-contribution .m-relative-song h4 {
    font-size: 14px;
    color: #333
}

.m-contribution .m-relative-song h5 {
    margin-top: 4px;
    font-size: 12px;
    color: #888
}

.m-contribution .m-description {
    font-size: 12px;
    color: #333;
    line-height: 20px
}

.m-contribution .m-description a,
.m-contribution .m-description a:visited {
    color: #507daf
}

.m-contribution .m-agreement {
    text-align: center;
    font-size: 12px;
    color: #888
}

.m-contribution .m-agreement a {
    color: #507daf
}

.m-contribution .m-agreement a:active {
    opacity: .8
}

.m-contribution footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 15px;
    background: #fff
}

.m-contribution footer .u-contribute-btn {
    outline: none;
    background: linear-gradient(-90deg, #fc5244, #d33a31);
    border-radius: 40px;
    height: 40px;
    font-size: 16px;
    color: hsla(0, 0%, 100%, .3)
}

.m-contribution footer .u-contribute-btn.active {
    color: #fff
}

.m-contribution footer .u-contribute-btn.active:active {
    color: hsla(0, 0%, 100%, .8)
}

.m-contribution footer .z-contribute-done .u-video-cover {
    width: 26.66666666vw;
    height: 14.93333333vw;
    margin-right: 10px;
    overflow: hidden;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover
}

.m-contribution footer .z-contribute-done .m-delete {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .2)
}

.m-contribution footer .z-contribute-done .m-delete img {
    width: 36px;
    height: 36px
}

.m-contribution footer .z-contribute-done h2 {
    min-height: 38px;
    font-size: 12px;
    color: #333
}

.m-contribution footer .z-contribute-done .m-status {
    font-size: 12px;
    color: #888
}

.m-contribution footer .z-contribute-done .m-status a {
    color: #507daf
}

.m-contribution footer .z-contribute-done .m-status a:active {
    opacity: .8
}

.m-contribution footer .z-contribute-done .m-status .z-icon-success {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 3px;
    background: url() no-repeat 50%;
    background-size: cover
}

.m-contribution footer .z-contribute-done .m-status .z-icon-failed {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 3px;
    background: url() no-repeat 50%;
    background-size: cover
}

.u-video-loading-spinner {
    margin-right: 10px;
    box-sizing: border-box;
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: 18px auto;
    background-image: url(loading_spinner.png);
    animation: video-loading-spinner 2s steps(9) infinite
}

@keyframes video-loading-spinner {
    to {
        background-position: 0 -324px
    }
}

.n-video-item {
    padding: 6px 6px 0;
    border-bottom: 5px solid #f1f2f3
}

.n-video-item:first-of-type {
    padding-top: 0
}

.n-video-item:last-of-type {
    border-bottom: 5px solid #fff
}

.n-video-item .m-cover {
    position: relative;
    height: 54.4vw;
    border-radius: 8px;
    overflow: hidden
}

.n-video-item .m-cover .u-cover-img {
    display: inline-block;
    width: 100%;
    height: 100%
}

.n-video-item .m-cover .rank-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.n-video-item .m-cover .u-icon-new {
    display: inline-block;
    width: 18px;
    height: 5px;
    background: url() no-repeat;
    background-size: contain
}

.n-video-item .m-cover .u-icon-up {
    display: inline-block;
    width: 5px;
    height: 6px;
    margin-right: 2px;
    background: url() no-repeat;
    background-size: contain
}

.n-video-item .m-cover .u-icon-down {
    transform: scaleY(-1)
}

.n-video-item .m-cover .u-rank-change-txt {
    font-size: 12px;
    color: #fff
}

.n-video-item .m-cover .video-detail {
    position: absolute;
    padding-left: 10px;
    padding-bottom: 10px;
    left: 0;
    bottom: 0;
    right: 0;
    background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .4))
}

.n-video-item .m-cover .video-detail .cnt {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
    align-items: flex-end
}

.n-video-item .m-cover .video-detail .u-rank-index {
    line-height: 35px;
    font-size: 30px;
    color: #d33a31;
    margin-right: 7px
}

.n-video-item .u-h2 {
    margin: 10px 0;
    border-bottom: 1px solid #e2e2e3;
    font-size: 16px;
    font-weight: 500;
    color: #333
}

.n-video-item .m-user-info {
    -ms-flex-pack: justify;
    justify-content: space-between;
    background: #fff;
    padding: 8px 0;
    border-radius: 0 0 8px 8px;
    font-size: 12px;
    color: #868686
}

.n-video-item .m-user-info,
.n-video-item .m-user-info .cnt-user {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.n-video-item .m-user-info .cnt-user {
    -ms-flex: 1;
    flex: 1;
    min-width: 0
}

.n-video-item .m-user-info .u-avatar {
    width: 30px;
    height: 30px
}

.n-video-item .m-user-info .u-avatar.placeholder {
    display: inline-block;
    border-radius: 50%;
    background: #b7b7b7
}

.n-video-item .m-user-info .u-user-name {
    -ms-flex: 1;
    flex: 1;
    font-size: 13px;
    color: #333;
    margin-left: 10px
}

.n-video-item .m-user-info .cnt-count {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.n-video-item .m-user-info .u-base-icon {
    display: inline-block;
    width: 13px;
    height: 11px;
    margin-right: 5px;
    background: url() no-repeat;
    background-size: contain
}

.n-video-item .m-user-info .u-icon-comment {
    background: url() no-repeat;
    background-size: contain
}

.n-video-item .m-user-info .u-hot-icon {
    display: inline-block;
    width: 13px;
    height: 14px;
    margin-right: 5px;
    background: url(icon_hot@2x.png) no-repeat;
    background-size: contain
}

.n-video-item .m-user-info .u-count-text {
    font-size: 12px;
    color: #868686
}

.m-tooltip-video {
    -ms-flex-pack: center;
    justify-content: center;
    position: relative;
    z-index: 2
}

.m-tooltip-video,
.m-tooltip-video .tip-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.m-tooltip-video .tip-wrapper {
    -ms-flex-direction: column;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%)
}

.m-tooltip-video .tip-content {
    width: 234px;
    padding: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #efefef;
    font-size: 13px;
    color: #4d4d4d;
    margin: 0
}

.m-tooltip-video .tooltip-arrow-top {
    margin: 0;
    width: 10px;
    height: 10px;
    border-left: 1px solid #e5e5e5;
    border-top: 1px solid #e5e5e5;
    background: #efefef;
    transform: translateY(50%) rotate(45deg);
    z-index: 3
}

.n-video-rank-toplist {
    padding-bottom: 20px;
    background-color: #fff
}

.n-video-rank-toplist .n-video-item .m-cover .u-rank-change-txt {
    line-height: 1
}

.n-video-rank-toplist .n-video-item .m-cover {
    border-radius: 5px
}

.n-video-rank-toplist .n-video-item .m-cover .u-icon-new {
    margin-top: 15px
}

.n-video-rank-toplist .n-video-item .m-cover .video-detail .u-rank-index {
    line-height: 22px
}

.n-video-rank-toplist .n-video-item .u-h2 {
    line-height: 23px
}

.n-video-rank-toplist .n-video-item .u-h2,
.n-video-rank-toplist .n-video-item .u-line {
    position: relative;
    border-bottom: 0;
    font-weight: 700
}

.n-video-rank-toplist .n-video-item .u-line:after {
    position: absolute;
    content: "";
    left: 0;
    right: 0;
    height: 1px;
    transform: scaleY(.5);
    background: rgba(0, 0, 0, .1);
    bottom: 0
}

.n-video-rank-toplist .n-video-item .m-cover .rank-wrapper {
    margin-top: 12px
}

.n-video-rank-toplist *,
.n-video-rank-toplist :after,
.n-video-rank-toplist :before {
    box-sizing: border-box
}

.n-video-rank-toplist header {
    padding: 0 6px;
    height: 65px;
    position: relative
}

.n-video-rank-toplist header h1 {
    padding: 12px 0 3px;
    font-size: 17px;
    font-weight: 700;
    color: #ea524f
}

.n-video-rank-toplist header .u-share-text {
    position: absolute;
    top: 15px;
    right: 9px;
    font-size: 12px;
    color: #f77070;
    z-index: 10;
    line-height: 18px
}

.n-video-rank-toplist header .u-icon-right {
    display: inline-block;
    width: 5px;
    height: 9px;
    background: url();
    background-size: cover
}

.n-video-rank-toplist header .tip-content {
    background: rgba(0, 0, 0, .8);
    border: 1px solid rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 12px
}

.n-video-rank-toplist header .tooltip-arrow-top {
    background: rgba(0, 0, 0, .8);
    border-left: 1px solid rgba(0, 0, 0, .8);
    border-top: 1px solid rgba(0, 0, 0, .8)
}

.n-video-rank-toplist header .pubtime-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.n-video-rank-toplist header .u-pub-text {
    font-size: 12px;
    margin-right: 5px;
    color: #999
}

.n-video-rank-toplist header .u-hint-icon {
    display: inline-block;
    margin-top: -1px;
    width: 12px;
    height: 12px;
    background: url();
    background-size: cover;
    background-position: 50%;
    transform: scale(.91)
}

.n-video-rank-toplist header .banner-img {
    display: inline-block;
    width: 236px;
    height: 41px;
    position: absolute;
    right: 0;
    bottom: 0;
    background: url(banner_videorank_new.png);
    background-size: cover
}

.n-user-rank-toplist *,
.n-user-rank-toplist :after,
.n-user-rank-toplist :before {
    box-sizing: border-box
}

.n-user-rank-toplist header {
    width: 100%;
    height: 57.33333333vw;
    position: relative
}

.n-user-rank-toplist header img {
    width: 100%;
    height: 100%
}

.n-user-rank-toplist .panel-container {
    width: 100vw;
    min-height: 100vh;
    overflow: hidden
}

.n-user-rank-toplist .panel-container .panel-sub-container {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    transition: transform .2s
}

.n-user-rank-toplist .panel-container .panel {
    width: 100vw;
    min-width: 100vw;
    max-width: 100vw;
    height: auto;
    position: relative
}

.n-user-rank-toplist .panel-container .panel-inactive {
    height: 60px
}

.n-user-rank-toplist .pubtime-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 13px;
    margin-top: 10px
}

.n-user-rank-toplist .pubtime-wrapper .u-pub-text {
    opacity: .9;
    font-size: 12px;
    color: #333;
    margin-right: 4px
}

.n-user-rank-toplist .pubtime-wrapper .u-hint-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url();
    background-size: cover;
    background-position: 50%
}

.n-user-item .m-user-info {
    padding: 15px 6px 8px 0
}

.n-user-item .m-user-info,
.n-user-item .m-user-info .rank-wrapper {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.n-user-item .m-user-info .rank-wrapper {
    -ms-flex-direction: column;
    flex-direction: column;
    width: 43px
}

.n-user-item .m-user-info .rank-wrapper .cnt {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.n-user-item .m-user-info .u-icon-new {
    width: 16px;
    height: 5px
}

.n-user-item .m-user-info .u-icon-up {
    width: 5px;
    height: 6px;
    margin-right: 2px
}

.n-user-item .m-user-info .u-icon-down {
    transform: scaleY(-1)
}

.n-user-item .m-user-info .u-rank-change-txt {
    font-size: 8px;
    color: #d33a31
}

.n-user-item .m-user-info .u-rank-index {
    line-height: 35px;
    font-size: 34px;
    color: #d33a31
}

.n-user-item .m-user-info .cnt-user {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex: 1;
    flex: 1;
    min-width: 0
}

.n-user-item .m-user-info .u-avatar {
    width: 50px;
    height: 50px
}

.n-user-item .m-user-info .u-avatar .u-avatar-ava {
    transform: scale(1.333333)
}

.n-user-item .m-user-info .u-user-name {
    -ms-flex: 1;
    flex: 1;
    font-size: 13px;
    color: #333;
    margin-left: 10px
}

.n-user-item .m-user-info .u-follow-btn-user-toplist {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: auto;
    width: 75px;
    height: 28px;
    background: rgba(211, 58, 49, .1);
    border-radius: 50px;
    font-size: 12px;
    color: #d33a31
}

.n-user-item .m-user-info .u-follow-btn-user-toplist .u-plus-icon {
    fill: #d33a31;
    width: 12px;
    height: 12px;
    margin-right: 4px
}

.n-user-item .m-user-info .u-follow-btn-user-toplist .u-follow-icon {
    font-size: 20px;
    margin-right: 5px
}

.n-user-item .m-cover {
    position: relative;
    margin-left: 43px;
    margin-right: 6px;
    height: 50.93333333vw;
    border-radius: 8px;
    overflow: hidden
}

.n-user-item .m-cover .u-cover-img {
    display: inline-block;
    width: 100%;
    height: 100%
}

.n-user-item .m-cover .u-video-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 15px;
    color: #fff;
    background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0, rgba(0, 0, 0, .3) 0, transparent)
}

.n-user-item .m-cover .count-info-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 34px;
    padding-left: 10px;
    padding-right: 10px;
    background: linear-gradient(180deg, transparent 0, rgba(0, 0, 0, .4))
}

.n-user-item .m-cover .count-info-wrapper,
.n-user-item .m-cover .count-info-wrapper .cnt-left,
.n-user-item .m-cover .count-info-wrapper .cnt-right {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.n-user-item .m-cover .count-info-wrapper .cnt-right {
    margin-left: auto
}

.n-user-item .m-cover .count-info-wrapper .u-icon-play {
    width: 8px;
    height: 10px;
    margin-right: 4px
}

.n-user-item .m-cover .count-info-wrapper .u-icon-video-length {
    width: 9px;
    height: 12px;
    margin-right: 4px
}

.n-user-item .m-cover .count-info-wrapper .u-count-text {
    font-size: 13px;
    color: #fff
}

.n-user-item .u-splitter-line {
    height: 1px;
    opacity: .1;
    background: #000;
    margin-top: 15px;
    margin-left: 6px;
    margin-right: 6px
}

.m-toplist-rank-tab {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 5px 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4;
    background-color: transparent;
    transition: background-color .1s
}

.m-toplist-rank-tab-sticky-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    background-color: #d73a00
}

.m-toplist-rank-tab .tab-item {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex: 1;
    flex: 1;
    font-size: 16px;
    color: #fff
}

.m-toplist-rank-tab .indicator {
    background: transparent;
    border-radius: 50px;
    width: 35px;
    height: 3px
}

.m-toplist-rank-tab .indicator.active {
    background: #fff
}

.m-recover {
    height: 100vh;
    background-color: #fbfcfd;
    box-sizing: border-box;
    padding-bottom: 60px
}

.m-recover .spin {
    width: 30px;
    height: 30px;
    margin: 10px auto;
    background: url() 50% no-repeat;
    background-size: 30px
}

.m-toast {
    font-size: 15px;
    line-height: 18px;
    background-color: rgba(0, 0, 0, .8);
    padding: 16px 13px;
    white-space: nowrap;
    box-sizing: border-box;
    border-radius: 11px;
    width: auto !important;
    min-width: 180px
}

.m-recover,
body {
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

@media screen and (device-height:812px) and (device-width:375px) {
    .m-recover {
        padding-bottom: 106px
    }
    .m-recoverbottom {
        padding-bottom: 34px
    }
    .m-recoverbottom .recoverbottom {
        -ms-flex-pack: start;
        justify-content: flex-start
    }
}

@media screen and (device-height:896px) and (device-width:414px) {
    .m-recover {
        padding-bottom: 106px
    }
    .m-recoverbottom {
        padding-bottom: 34px
    }
    .m-recoverbottom .recoverbottom {
        -ms-flex-pack: start;
        justify-content: flex-start
    }
}

.m-recoverbottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #fff;
    z-index: 99
}

.m-recoverbottom.off {
    display: none
}

.m-recoverbottom.on {
    display: block
}

.m-recoverbottom .recoverbottom {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 53.6666px;
    box-sizing: border-box;
    padding-top: 3px
}

.m-recoverbottom .recoverbottom .icon-recover {
    display: block;
    height: 28px;
    width: 28px;
    background-size: 100% 100%;
    background-image: url(recover.png)
}

.m-recoverbottom .recoverbottom .text {
    color: #666;
    font-size: 11px;
    line-height: 16px
}

.none-recover {
    text-align: center;
    padding-top: 30px
}

.m-recoverplaylist {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 0 0 10px
}

.m-recoverplaylist .checkbox .label {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 22px;
    box-sizing: border-box;
    border: 1px solid rgba(0, 0, 0, .1)
}

.m-recoverplaylist .checkbox .label.on {
    background-image: url();
    background-size: 100% 100%;
    border: none
}

.m-recoverplaylist .img {
    display: block;
    margin: 0 10px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.m-recoverplaylist .img img {
    width: 53px;
    height: 53px
}

.m-recoverplaylist .txt {
    display: -ms-flexbox;
    display: flex;
    height: 62px;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: center;
    justify-content: center;
    overflow: hidden
}

.m-recoverplaylist .txt div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%
}

.m-recoverplaylist .txt .title {
    color: #333;
    font-size: 16px;
    line-height: 24px
}

.m-recoverplaylist .txt .count {
    color: #999;
    font-size: 12px;
    line-height: 17px
}

body {
    background-color: #fff;
    background-size: 100% 100%
}

.m-download {
    padding: 35px 20px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    background-image: url(background.jpg);
    background-size: 100% auto;
    background-position: top;
    background-repeat: no-repeat
}

.m-download-icon {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.m-download-icon .icon {
    width: 100px;
    height: 100px;
    background-image: url("3pJ0sOzbKzZ7RaSXq7kJKQ==_109951163309851700.png");
    background-size: 100% 100%
}

.m-download-icon .txt {
    color: #666;
    font-size: 12px;
    line-height: 25px;
    text-align: center
}

.m-download-tip {
    font-size: 13px;
    color: #999;
    line-height: 18.5px;
    margin-top: 20px
}

.m-download-intro {
    border-radius: 3px;
    padding-top: 50px
}

.m-download-intro div {
    font-size: 15px;
    color: #666;
    line-height: 19px;
    padding-left: 15px;
    position: relative;
    z-index: 1;
    margin-bottom: 8.5px
}

.m-download-intro div:before {
    display: block;
    content: "";
    position: absolute;
    z-index: 2;
    width: 6px;
    height: 6px;
    border-radius: 6px;
    background-color: #d13f38;
    left: 0;
    top: 6px
}

.m-download-intro .title {
    color: #333;
    font-size: 17px;
    line-height: 24px;
    margin-bottom: 12px;
    font-weight: 700;
    padding: 0
}

.m-download-intro .title:before {
    display: none
}

.m-download-btn {
    margin-top: 20px
}

.m-download-btn .btn {
    width: 100%;
    text-align: center;
    color: #fff;
    font-size: 17px;
    line-height: 40px;
    border-radius: 40px;
    background-image: linear-gradient(90deg, #fa5d50, #d13f38);
    background-size: 100% 100%;
    cursor: pointer
}

.m-download-btn .tip {
    color: #bfbfbf;
    font-size: 13px;
    line-height: 25px;
    text-align: center;
    margin-top: 10px
}

.m-microprogram {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-color: #000;
    height: 100vh;
    width: 100vw;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: auto 100%;
    overflow: hidden;
    transition: opacity .3s linear;
    position: relative
}

.m-microprogram:before {
    content: "";
    display: block;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2)
}

.m-microprogram>div {
    z-index: 2
}

.m-microprogram .microprogram-top {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-pack: center;
    justify-content: center;
    padding: 20px 10px 0;
    width: 100%;
    box-sizing: border-box
}

.m-microprogram .microprogram-top .microprogram-avatar {
    margin-right: 20px;
    margin-top: -5px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center
}

.m-microprogram .microprogram-top .microprogram-avatar img {
    display: block;
    width: 45px;
    height: 45px;
    border-radius: 45px;
    margin-bottom: 5px
}

.m-microprogram .microprogram-top .microprogram-tip {
    -ms-flex: 1;
    flex: 1;
    position: relative;
    padding: 8px;
    font-size: 14px;
    line-height: 18px;
    color: #fff;
    border-radius: 5px;
    background-color: hsla(0, 0%, 100%, .1);
    word-break: break-all;
    word-wrap: break-word
}

.m-microprogram .microprogram-top .microprogram-tip:before {
    content: "";
    position: absolute;
    z-index: 1;
    display: block;
    top: 7px;
    left: -10px;
    border: 10px solid transparent;
    border-left-width: 0;
    border-right-color: hsla(0, 0%, 100%, .1)
}

.m-microprogram .microprogram-play {
    -ms-flex: 1;
    flex: 1;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 100%
}

.m-microprogram .microprogram-play .microprogram-circle {
    position: relative;
    margin-bottom: 20px;
    width: 70vw;
    height: 70vw;
    border-radius: 999px;
    background-color: hsla(0, 0%, 100%, .5);
    background-size: 100% 100%
}

.m-microprogram .microprogram-play .microprogram-circle .microprogram-btn {
    width: 56.5px;
    height: 56.6px;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-image: url(share_program_icn_play@3x.png);
    background-size: 100% 100%
}

.m-microprogram .microprogram-play .microprogram-line1 {
    font-size: 20px;
    line-height: 36px;
    color: #fff
}

.m-microprogram .microprogram-play .microprogram-line2 {
    font-size: 12px;
    line-height: 16px;
    color: hsla(0, 0%, 100%, .4)
}

.m-microprogram .microprogram-bottom {
    width: 100%;
    box-sizing: border-box;
    padding: 15px 40px
}

.m-microprogram .microprogram-bottom a {
    margin: 0 auto;
    display: block;
    max-width: 295px;
    font-size: 16px;
    color: #fff;
    height: 40px;
    line-height: 40px;
    background-color: #d33a31;
    text-align: center;
    border-radius: 40px
}

@media screen and (min-width:0px) and (max-width:319px) {
    .m-microprogram .microprogram-top .microprogram-avatar {
        margin-top: 0;
        font-size: 12px
    }
    .m-microprogram .microprogram-top .microprogram-avatar img {
        width: 30px;
        height: 30px
    }
    .m-microprogram .microprogram-top .microprogram-tip {
        font-size: 12px;
        line-height: 16px
    }
    .m-microprogram .microprogram-top .microprogram-tip:before {
        top: 8px
    }
    .m-microprogram .microprogram-play .microprogram-circle .microprogram-btn {
        width: 36px;
        height: 36px
    }
    .m-microprogram .microprogram-play .microprogram-line1 {
        font-size: 12px;
        line-height: 20px
    }
    .m-microprogram .microprogram-play .microprogram-line2 {
        font-size: 10px;
        line-height: 14px
    }
}

@media screen and (min-width:320px) and (max-width:350px) {
    .m-microprogram .microprogram-top .microprogram-avatar {
        margin-top: 0;
        font-size: 14px
    }
    .m-microprogram .microprogram-top .microprogram-avatar img {
        width: 40px;
        height: 40px
    }
    .m-microprogram .microprogram-top .microprogram-tip {
        font-size: 14px;
        line-height: 20px
    }
    .m-microprogram .microprogram-top .microprogram-tip:before {
        top: 10px
    }
    .m-microprogram .microprogram-play .microprogram-circle .microprogram-btn {
        width: 44px;
        height: 44px
    }
    .m-microprogram .microprogram-play .microprogram-line1 {
        font-size: 14px;
        line-height: 24px
    }
    .m-microprogram .microprogram-play .microprogram-line2 {
        font-size: 12px;
        line-height: 18px
    }
}

.m-baby {
    background-color: #fbfcfd;
    padding: 0 6px
}

.m-baby-banner-wrapper {
    position: relative;
    overflow: hidden
}

.m-baby-banner-wrapper .m-baby-banner {
    position: relative;
    width: 100%;
    padding-top: 38.89%;
    border-radius: 5px;
    color: #000;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%
}

.m-baby-banner-wrapper .m-baby-banner-tag {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 61px;
    height: 20px;
    color: #fff;
    border-radius: 5px 0 5px 0;
    font-size: 12px;
    text-align: center
}

.fm-play {
    background-image: url()
}

.fm-arowright {
    background-image: url()
}

.m-baby-fm {
    display: inline-block;
    margin-top: 10px;
    width: 100%;
    height: 70px;
    background-color: #fff
}

.m-baby-fm .m-baby-fm-fl {
    float: left
}

.m-baby-fm .m-baby-fm-fl .fl-content {
    margin: 25px 0 25px 16px
}

.m-baby-fm .m-baby-fm-fl .fl-content .fl-content-item {
    display: inline-block;
    vertical-align: middle;
    background-repeat: no-repeat
}

.m-baby-fm .m-baby-fm-fl .fl-content .fm-play {
    width: 20px;
    height: 20px;
    background-size: auto 20px
}

.m-baby-fm .m-baby-fm-fl .fl-content .fm-text {
    margin-left: 7px;
    vertical-align: middle;
    font-size: 20px;
    font-weight: 700;
    position: relative;
    top: 1px
}

.m-baby-fm .m-baby-fm-fl .fl-content .fm-arowright {
    margin-left: 7px;
    width: 8px;
    height: 15px;
    background-size: 8px 15px;
    position: relative;
    bottom: 1px
}

.m-baby-fm .m-baby-fm-fr {
    margin-right: 16px;
    float: right
}

.m-baby-fm .m-baby-fm-fr .fr-bg {
    width: 140px;
    height: 76px;
    background-size: 140px 76px
}

.clearfix:after {
    content: " ";
    clear: both;
    display: table
}

.m-baby-recommend {
    background-color: #fbfcfd;
    margin-top: 20px
}

.remd-arowright {
    background-image: url()
}

.m-baby-homeremd {
    padding-top: 20px
}

.m-baby-homeremd .remd_tl {
    position: relative;
    margin-bottom: 14px;
    font-size: 17px;
    font-weight: 700;
    height: 20px;
    line-height: 20px
}

.m-baby-homeremd .remd_tl .remd-cluster {
    display: inline-block;
    margin-left: 9px;
    width: 8px;
    height: 14px;
    background-size: 8px 14px;
    background-repeat: no-repeat
}

.m-baby-homeremd .remd_songs {
    position: relative;
    padding-bottom: 24px
}

.m-baby-homeremd .remd_ul {
    padding-bottom: 16px
}

.m-baby-homeremd .remd_ul:after {
    display: block;
    visibility: hidden;
    clear: both;
    height: 0;
    overflow: hidden;
    content: "."
}

.m-baby-homeremd .remd_li {
    display: block;
    float: left;
    width: 33.3%;
    padding-left: 1px;
    padding-right: 1px;
    box-sizing: border-box
}

.m-baby-homeremd .remd_li:first-child {
    padding-left: 0;
    padding-right: 2px
}

.m-baby-homeremd .remd_li:last-child {
    padding-left: 2px;
    padding-right: 0
}

.m-baby-homeremd .remd_img {
    position: relative;
    overflow: hidden;
    padding-bottom: 100%;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%
}

.m-baby-homeremd .remd_img:after {
    content: " ";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 20px;
    z-index: 2;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent)
}

.m-baby-homeremd .remd_high {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    width: 20px;
    height: 20px;
    background: url() 0 no-repeat;
    background-size: contain
}

.m-baby-homeremd .remd_lnum {
    position: absolute;
    right: 5px;
    top: 2px;
    z-index: 3;
    padding-left: 13px;
    color: #fff;
    font-size: 12px;
    background-position: 0;
    background-repeat: no-repeat;
    background-size: 11px 10px;
    text-shadow: 1px 0 0 rgba(0, 0, 0, .15)
}

.m-baby-homeremd .remd_text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding: 6px 2px 0 6px;
    line-height: 1.2;
    font-size: 13px
}

.m-baby-homeremd .remd_newsg {
    position: relative;
    min-height: 20px
}

.m-baby-homeremd .segment-tag {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.m-baby-homeremd .segment-tag-item {
    width: 33.3%;
    height: 60px
}

.m-baby-homeremd .segment-tag-item>div {
    background-color: #fff
}

.m-baby-homeremd .segment-tag-item .item-img {
    display: inline-block;
    vertical-align: middle;
    margin: 10px;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%
}

.m-baby-homeremd .segment-tag-item .item-title {
    display: inline-block;
    vertical-align: middle;
    font-weight: 700;
    font-size: 16px
}

.m-baby-homeremd .res-embed-title {
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding-top: 56.25%
}

.m-baby-homeremd .res-embed-title figure {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-position: 50%;
    background-size: cover;
    border-radius: 3px
}

.m-baby-homeremd .res-embed-title .res-embed-title-name {
    font-size: 16px;
    color: #fff;
    position: absolute;
    left: 10px;
    bottom: 15px;
    z-index: 4
}

.m-baby-homeremd .baby-video .baby-video-img {
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding-top: 56.25%;
    border-radius: 3px;
    overflow: hidden;
    background-position: 50%;
    background-size: cover
}

.m-baby-homeremd .baby-video .baby-video-img:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .3);
    z-index: 2;
    pointer-events: none
}

.m-baby-homeremd .baby-video .baby-video-img .u-icon {
    z-index: 5
}

.m-baby-homeremd .baby-video .baby-video-img figcaption {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 4;
    padding: 20px 6px 6px;
    background: -webkit-linear-gradient(top, transparent, rgba(0, 0, 0, .5));
    color: #fff
}

.m-baby-homeremd .baby-video .baby-video-img figcaption>em {
    font-size: 16px
}

.m-baby-homeremd .baby-video .baby-video-img .times {
    float: left;
    font-size: 12px
}

.m-baby-homeremd .baby-video .baby-video-img .times .icn {
    width: 8px;
    height: 10px;
    fill: #fff;
    margin: 2px 4px 0 0
}

.m-baby-homeremd .baby-video .baby-video-img .plytime {
    float: right;
    font-size: 12px
}

.m-baby-homeremd .baby-video .baby-video-img .plytime .jump {
    display: inline-block;
    vertical-align: middle;
    margin: -1px 4px 0 0;
    width: 12px;
    height: 12px;
    background: url();
    background-size: auto 12px
}

.m-baby-homeremd .baby-video .baby-video-img .u-icon {
    display: inline-block;
    position: absolute;
    background: url(sprite_2x.png) no-repeat;
    background-size: 150px auto
}

.m-baby-homeremd .baby-video .baby-video-img .u-icon-vdplay {
    width: 42px;
    height: 42px;
    background-position: -50px -120px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.m-baby-homeremd .baby-video .baby-video-info {
    margin-top: 20px
}

.m-baby-homeremd .baby-video .baby-video-info .baby-video-info-fl {
    float: left
}

.m-baby-homeremd .baby-video .baby-video-info .baby-video-info-fr {
    float: right
}

.m-baby-homeremd .baby-video .baby-video-info .lsthd_auth {
    display: block;
    position: relative
}

.m-baby-homeremd .baby-video .baby-video-info .lsthd_link {
    display: inline-block
}

.m-baby-homeremd .baby-video .baby-video-info .lsthd_ava {
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 5px
}

.m-baby-homeremd .baby-video .baby-video-info .info-item {
    margin-left: 16px;
    font-size: 12px
}

.m-baby-homeremd .baby-video .baby-video-info .info-item .jump {
    display: inline-block;
    vertical-align: middle;
    margin: -1px 4px 0 0;
    width: 12px;
    height: 12px;
    background-size: auto 12px;
    background-repeat: no-repeat
}

.m-baby-homeremd .baby-video .baby-video-info .play-count .jump {
    background-image: url()
}

.m-baby-homeremd .baby-video .baby-video-info .comment-count .jump {
    background-image: url()
}

.clearfix:after {
    content: " ";
    clear: both;
    display: table
}

@media screen and (-webkit-min-device-pixel-ratio:3) {
    .baby-video .baby-video-img .plytime .jump {
        background-image: url()
    }
    .baby-video .baby-video-img .u-icon {
        background-image: url(sprite_3x.png)
    }
}

@media only screen and (device-width:375px) and (device-height:812px) {
    .m-homeremd {
        padding-left: constant(safe-area-inset-left);
        padding-right: constant(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right)
    }
}

@media screen and (min-width:375px) {
    .m-baby-homeremd .segment-tag-item .item-title {
        font-size: 18px
    }
}

.remdlist {
    border-radius: 3px;
    position: relative;
    margin-bottom: 6px;
    background-color: #fff
}

.remdlist .remdlist-img {
    border-radius: 3px 0 0 3px;
    width: 33.3%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    float: left
}

.remdlist .remdlist-img:before {
    content: "";
    display: block;
    padding-top: 100%
}

.remdlist .remdlist-song-flex {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 33.3%;
    margin-left: 14px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center
}

.remdlist:after {
    content: "";
    clear: both;
    display: table
}

.tubocapsicum {
    margin: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.tubocapsicum .tubocapsicum-item {
    width: 100px;
    height: 120px
}

.tubocapsicum .tubocapsicum-item>div {
    background-color: #fff
}

.tubocapsicum .tubocapsicum-item .item-img {
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%
}

.tubocapsicum .tubocapsicum-item .item-title {
    margin-top: 8px;
    text-align: center;
    font-size: 12px
}

@media screen and (min-width:375px) {
    .tubocapsicum {
        margin: 0 13px
    }
}

.n-square {
    padding-bottom: 60px
}

.n-square .u-square-h2 {
    margin: 16px 6px;
    font-size: 17px;
    font-weight: 700;
    color: #333
}

.n-square .m-content {
    margin: 0 6px 20px
}

.n-square .m-content .u-cover {
    position: relative;
    height: 37.7333333vw;
    border-radius: 4px;
    overflow: hidden
}

.n-square .m-content .u-cover-img {
    width: 100%;
    height: 100%
}

.n-square .m-content .u-title {
    font-size: 15px;
    font-weight: 500;
    margin-top: 4px;
    color: #333
}

.n-square .m-content .u-subscript {
    display: inline-block;
    position: absolute;
    bottom: 0;
    right: 0;
    font-weight: 500;
    color: #fff;
    padding: 0;
    font-size: 12px;
    text-align: center;
    padding: 0 20px;
    height: 22.5px;
    line-height: 22.5px;
    background: #7cb9e7;
    border-top-left-radius: 8px
}

.n-square .section-splitter {
    width: 100%;
    height: 5px;
    background: rgba(0, 0, 0, .04)
}

.n-square .u-end {
    font-size: 13px;
    color: #8a8a8a;
    margin: 15px auto 30px;
    text-align: center
}